I got this code:
ng-class="{selectedHeader: key == selectedCol}"
It works but I would like too add the 'key' value as a class too, Ive tried:
ng-class="[{selectedHeader: key == selectedCol}, key]"
But that wont work, does anyone know how to solve this?
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. And in the above code, class name will be added only when the condition is true.
Overview. You can use the ngClass directive to conditionally apply one-to-many classes or styles to an element, giving you an effective way to operate with multiple classes or styles at once.
Now you have learned the basics of Angular directives, including how to use ngIf, ngFor, ngClass, ngStyle, ngModel, and ngSwitch. You can combine them to create more complex user interfaces.
The ng-class Directive in AngularJS is used to specify the CSS classes on HTML elements. It is used to dynamically bind classes on an HTML element. The value for the ng-class has either string, an object, or an array. It must contain more than one class name, which is separated by space, in the case of a string.
If you always want key
to be added as a class:
ng-class="{selectedHeader: key == selectedCol, key: true]"
or you can just put it into a class
attribute with {{}}
interpolation.
ng-class="{selectedHeader: key == selectedCol}" class="{{key}}"
Just for completeness, if you only want to include it if it's equal to selectedCol
:
ng-class="{selectedHeader: key == selectedCol, key: key == selectedCol}"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With