What is the difference between ng-class and ng-style?

Question

ng-class and ng-style both seem to be methods of dynamically setting CSS classes. What is the difference between them?

Solution 1

ng-style is used to interpolate javascript object into style attribute, not css class.

Following directive will be translated to style="color:red"

ng-style="{color: 'red'}"

And ng-class directive translates your object into class attribute.

Following will be translated to class="deleted" when isDeleted variable is true.

ng-class="{'deleted': isDeleted}"

Note:

There is one more use case for ng-style. If you want to interpolate something in style attribute, you should consider using ng-style. Otherwise, that would not work before Internet Explorer 11 as documentation suggests.

So, instead of using style:

style="width: {{progress}}"

Use ng-style:

ng-style="{'width':progress}"

Solution 2

In ng-class you are loading a CSS class defined in some place, like Bootstrap. In ng-style you are setting the CSS style that you want that element has, example:

ng-style="{ 'background-color': person.email == selectedPerson.email ? 'lightgray' : ' '}" //background-color is a style

has-error is a class defined in somewhere that is composed by style(s):

ng-class="{ 'has-error’: !theForm.email.$valid, 'has-success':theForm.email.$valid}

Solution 3

From the official Docs: https://angular.io/api/common/NgClass

1. These are different ways to use ngClass

   ...

   <some-element [ngClass]="['first', 'second']">...</some-element>
   
   <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some- 
   

   element>

   <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
   
   <some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
   

2. Similarly with ngStyle you can do the following:

**< some-element [ngStyle]="{'font-style': styleExp}">...</some-element>**

• Your styleExp can be anything that evaluates to a legal value for the attribute you are setting ,e.g. font-size in the example above

• Alternatively,

  ****< some-element [ngStyle]="objExp">...****

• Where objExp is an object containing key-value pairs of your style attributes e.g. { width: 40, margin: '2em' } etc.

Comments

[showdev]

ng-class sets classes. ng-style sets styles. This answer might be informative.