AngularJS ngclass Directive (original) (raw)

AngularJS ng-class Directive

Last Updated : 01 Aug, 2022

The ng-class Directive in AngularJS is used to specify the CSS classes on HTML elements. It is used to dynamically bind classes on an HTML element. The value for the ng-class has either string, an object, or an array. It must contain more than one class name, which is separated by space, in the case of a string. If it is an object, it will contain the key-value pairs, where the key represents the class name for the class that wants to add & value represent the boolean value. If the expression inside the ng-class directive returns true then only the class is added else it is not added. If the value of ng-class is an array then it can be the combination of both strings as well as an array. It is supported by all HTML elements.

Syntax:

Contents...

Example 1: This example uses the ng-class Directive to set and reset the CSS class.

HTML

<!DOCTYPE html>

< html >

< head >

`` < title >ng-class Directive</ title >

`` < script src =

`` </ script >

`` < style >

`` .edit {

`` color: green;

`` font-size: 1.5em;

`` }

`` </ style >

</ head >

< body ng-app = "" style = "text-align:center" >

`` < h1 style = "color:green;" >

`` GeeksforGeeks

`` </ h1 >

`` < h3 >ng-class Directive</ h3 >

`` < div >

`` < input type = "button"

`` ng-click = "edit=true"

`` value = "Style" />

`` < input type = "button"

`` ng-click = "edit=false"

`` value = "Reset" />

`` < br >< br >

`` < span ng-class = "{true:'edit'}[edit]" >

`` GeeksforGeeks

`` </ span > is the computer science portal for geeks.

`` </ div >

</ body >

</ html >

Output:

Example 2: This example uses the ng-class Directive to set the CSS style to the class.

HTML

<!DOCTYPE html>

< html >

< head >

`` < title >ng-class Directive</ title >

`` < script src =

`` </ script >

`` < style type = "text/css" >

`` .index {

`` color: white;

`` background-color: green;

`` }

`` </ style >

</ head >

< body ng-app = "app" style = "padding:20px" >

`` < h1 style = "color:green;" >

`` GeeksforGeeks

`` </ h1 >

`` < h3 >ng-class Directive</ h3 >

`` < div ng-controller = "geek" >

`` < table >

`` < thead >

`` < th >Select any sorting technique:</ th >

`` < tr ng-repeat = "i in sort" >

`` < td ng-class = "{index:$index==row}"

`` ng-click = "sel($index)" >

`` {{i.name}}

`` </ td >

`` </ tr >

`` </ thead >

`` </ table >

`` </ div >

`` < script >

`` var app = angular.module("app", []);

`` app.controller('geek', ['$scope', function($scope) {

`` $scope.sort = [{

`` name: "Merge sort"

`` }, {

`` name: "Quick sort"

`` }, {

`` name: "Bubble sort"

`` }];

`` $scope.sel = function(index) {

`` $scope.row = index;

`` };

`` }]);

`` </ script >

</ body >

</ html >

Output:

Similar Reads

AngularJS Basics