ngClass - creating a class name containing angular expression

ng-class multiple classes angular 4
ngclass array of classes
how to use class in angular 7
angular 4 add class dynamically
ngclass multiple conditions
ngclass boolean
ng class import
angular bind class

I would like to create class names based on an the evaluation of an angular expression, but it seems that angular is removing these expressions from the eventually compiled classes. When iterating over cells, assume the following code:

<td ng-class="{'label{{cell.count}}': !!cell.count}"></td>

My goal is that when cell.count = 1 the resulting class will be "label1", when cell.count = 2, "label2", etc. In practice, what happens is that angular discards the expression in the eventual class - As long as !!cell.count, I get the class "label" regardless of the count. How can I achieve this?

Try this:

<td ng-class="{'label'+cell.count: !!cell.count}"></td>

If it gets too complicated you can also move the entire object out into a function in the scope.

<td ng-class="getCellClass()"></td>

and then:

$scope.getCellClass = function() { ... }

Your problem is that the {{...}} substitution isn't appropriate here. You have to use an angular expression to create the object, or if you call a method on the scope you can do any javascript you need to create it.

Class Binding & NgClass in Angular 2 ← Alligator.io, Learn how to bind classes in your Angular 2 templates. with class names as keys and expressions that evaluate to true or false as And then myClasses would be a property in the component that contains an object that looks like this: Building Maps in Angular using Leaflet, Part 4: The Shape Service. 'label'+cell.count does not work, angular does not approve of the plus sign here, and does not concatenate strings. Regarding your second suggestion - that's what I'm trying to avoid, I don't want to place my CSS classes logic inside of the controller, and was hoping to find a way around it – tome Sep 10 '15 at 16:35

Did you ever try: <td ng-class="'label' + cell.count"></td> - simply not using the curly braces works for me in my project (angular 1.5).

Angular ng-class Directive, Well organized and easy to understand Web building tutorials with lots of examples of The ng-class directive dynamically binds one or more CSS classes to an HTML element. If it is a string, it should contain one or more, space-separated class names. expression, An expression that returns one or more class names. To add a conditional class in Angular we can pass an object to ngClass where key is the class name and value is condition i.e., true or false as shown below. <div [ngClass]="{'classname' : condition}"></div> And in the above code, class name will be added only when the condition is true.

I had the same issue. I managed to solve it like this:

<td ng-class="{['label' + cell.count]: !!cell.count}"></td>

Angular 2+ Classes with NgClass and NgStyle ― Scotch.io, Luckily with Angular, we have multiple ways to create dynamic stylings to our application. className = "newclass"; //if we want to add multiple classes, we The object contains a key of all the styles we want to load and a  The NgClass directive in the Angular Framework allows us to set the CSS class dynamically for a DOM element. The NgClass directive behaves exactly as what ngClass used to do in AngularJS. Angular 9 NgClass Example

When I mix class + expression with ng-class, the ng-class is not , Jut making sure I am clear: The problem has absolutely no The problem arises only when ngClass is used together with a className that contains 2 Class setting broken when combining ng-class and multiple to markusherzog/angular​-schema-form-bootstrap that referenced this issue on Apr 9, 2018. Angular NgClass is an inbuilt directive in Angular that allows you to set the CSS class dynamically for the DOM element. The NgClass directive is used to set a CSS class dynamically based on custom conditions. It behaves very similarly to what ngClass used to do in AngularJS.

NgStyle & NgClass • Angular, This includes: ngClass, ngStyle, Style isolation, Style Debugging, :host, :host-​context, etc. can make sure that we can still keep our templates light and readable. For example, the following expression contains an array of classes: the keys of that object are the names of the CSS classes that we want to  string - the CSS classes listed in the string (space delimited) are added, Array - the CSS classes declared as Array elements are added, Object - keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed.

Angular ngClass and ngStyle: The Complete Guide, The NgClass directive allows you to apply CSS classes dynamically based NgClass Expressions; Setup Angular Web App; Create An Interface Class and Our cars collection has two properties name and color, go to src  ngClass Using Evaluated Expression. A more advanced method of using ngClass (and one that you will probably use the most) is to evaluate an expression. The way this works is that if a variable or expression evaluates to true, you can apply a certain class. If not, then the class won't be applied.

Comments
  • This may be of use - stackoverflow.com/questions/28208165/…. The return value of the function will determine the class applied
  • 'label'+cell.count does not work, angular does not approve of the plus sign here, and does not concatenate strings. Regarding your second suggestion - that's what I'm trying to avoid, I don't want to place my CSS classes logic inside of the controller, and was hoping to find a way around it