While adding a single class works great in this way -
[class.loading-state]="loading"
But how do I add multiple classes
Ex if loading
is true
add class - "loading-state" & "my-class"
How do I get it done via the [class] binding
Angular class binding can also be done to multiple classes by using a generic [class] binding without the dot (for example, [class]="classExpr"). You can format it as an object (object, Array, Map, Set, etc) with class names as the keys and truthy/falsy expressions as the values.
To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.
Using multiple classes is the real reason to use the NgClass directive. You can think of NgClass as being able to specify multiple [class.
Absolutely, divs can have more than one class and with some Bootstrap components you'll often need to have multiple classes for them to function as you want them to. Applying multiple classes of course is possible outside of bootstrap as well. All you have to do is separate each class with a space.
You can do this by simply using ngClass
:
Here first,second and third are the name of the classes.
And instead of true/false , you can directly put your conditions over there
<div [ngClass]="{'first': true, 'second': true, 'third': false}">...</div>
In your case
<div [ngClass]="{'loading-state': loading, 'my-class': loading }">...</div>
Or Shorter Veriosn (as @matko.kvesic commented)
<div [ngClass]="{'loading-state my-class': loading}">...</div>
Although Vivek Doshi answer is totally correct, below I put other alternatives to do the same with different boolean variables:
<div [class.first-class]="addFirst" [class.second-class]="addSecond">...</div>
export class MyComponent {
...
addFirst: boolean;
addSecond: boolean;
...
}
<div [ngClass]="setClasses()">...</div>
export class MyComponent {
...
addFirst: boolean;
addSecond: boolean;
...
setClasses() {
return {
'first-class': this.addFirst,
'second-class': this.addSecond
};
}
...
}
<div [ngClass]="{'first-class': addFirst, 'second-class': addSecond}">...</div>
export class MyComponent {
...
addFirst: boolean;
addSecond: boolean;
...
}
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