AngularJS, difference between ng-class and class with angular expression?

angularjs ng-class
vivek_jonam picture vivek_jonam · Jul 4, 2014 · Viewed 7k times · Source

What is the difference between the following two code snippets,
Code 1:

<div class={{getClass()}}/>

Code 2:

<div ng-class=getClass()/>

Answer

rob picture rob · Jul 4, 2014

With the first example before angular loads your class will literally be "{{getClass()}}". While in the second example the div won't have a class until angular runs its first digest.

There might be some minor differences with when they are recalculated but Angular will keep both up to date. I've run into issues before using the first method with Animation as ng-class has some hooks into animation.

Related questions

AngularJS ng-class if-else expression

With AngularJS I'm using ng-class the following way: <div class="bigIcon" data-ng-click="PickUp()" ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/> I'm wondering if I can use the if-else expression to do something similar to …

Read More
Adding multiple class using ng-class

Can we have multiple expression to add multiple ng-class ? for eg. <div ng-class="{class1: expressionData1, class2: expressionData2}"></div> If yes can anyone put up the example to do so. .

Read More
adding and removing classes in angularJs using ng-click

I am trying to work how to add a class with ngClick. I have uploaded up my code onto plunker Click here. Looking at the angular documentation i can't figure out the exact way it should be done. Below is …

Read More