Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-class one time binding

I'm wondering if it's possible to have a ng-class with class one time binded and class which are evaluated each digest cycle.

<div ng-class="{'one_time_binded_class': isMonkey(), 'not_one_time_binded_class': isUnicorn()}"></div>

I know I can one time bind the complete ng-class with ng-class="::{...}" but my need is to one time bind a particular expression

Of course, this thing doesn't work :

<div ng-class="{'my_static_class': ::isMonkey(), 'my_dynamic_class': isUnicorn()}"></div>

Is there a way to do it ?

like image 685
frlinw Avatar asked Sep 24 '15 17:09

frlinw


People also ask

What is the difference between ngClass and Ngstyle?

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

Why do we use ngClass?

The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.

What is the difference between ngClass and class?

ngClass is more powerful. It allows you to bind a string of classes, an array of strings, or an object like in your example. The above two lines of code is with respect to CSS class binding in Angular. There are basically 2-3 ways you can bind css class to angular components.

Can I use multiple ngClass?

Using multiple classes is the real reason to use the NgClass directive. You can think of NgClass as being able to specify multiple [class. class-name] on the same element.


1 Answers

Method 1:

class="some-class {{::expression ? 'my-class' : ''}}" 

Method 2:

ng-class="::{'my-class': expression}" 
like image 157
ifadey Avatar answered Sep 26 '22 20:09

ifadey