{"id":11266,"date":"2024-09-23T12:41:32","date_gmt":"2024-09-23T12:41:32","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=11266"},"modified":"2024-09-24T04:58:20","modified_gmt":"2024-09-24T04:58:20","slug":"ng-class-in-angularjs","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/angular\/ng-class-in-angularjs","title":{"rendered":"AngularJS ng-class"},"content":{"rendered":"

What is ng-class in AngularJs?<\/h2>\n

The ng-class is an inbuilt directive of angularJS that allows users to dynamically bind css class to html element based on some condition.<\/p>\n

The defined css class will be automatically assigned to elements whenever condition becomes true and also removed if condition becomes false.<\/p>\n

So the user has not to worry about adding \/removing the css class again once,based on the condition that the resulting class will be added and removed.<\/p>\n

Here the condition can be any type i.e on object value, array, number,string etc and based on the condition expression\u2019s resultI(boolean) the class will be added and removed.<\/p>\n

Syntax:<\/strong><\/p>\n

\r\n\r\n<\/pre>\n
Example:<\/strong><\/p>\n
\r\n
<\/div>\r\n<\/pre>\n
Css:<\/strong><\/p>\n
\r\n.highlight {  border:2px solid red;  color:blue  }\r\n<\/pre>\n
Output:<\/h3>\n
Here the div will have css class highlight assigned as the condition is true.<\/p>\n
If we change the html to\u2026<\/p>\n
\r\n 
<\/div>\r\n<\/pre>\n
Then the highlight class will not be assigned to div as the condition result is false.<\/p>\n
So we can see here using ng-class we can add css class to html elements conditionally<\/p>\n
Complete Example:<\/h3>\n
Scenario:<\/strong>
\nAn example to show a list of people for selection, and on selection of any person name from the selection list, the Title and information text style will be updated with ng-class directive\u2026<\/p>\n
HTML:<\/strong><\/p>\n
\r\n