firasKoubaa firasKoubaa - 3 years ago 202
TypeScript Question

How do I dynamically add two classes using Angular?

I want to add dynamically two classes to a button.

One class is a simple variable reference, and the other needs to use conditional logic.

Here is my code :

<button type="button" class="btn btn-circle btn-xl "
*ngFor="let node of warriorNodesList"
[ngClass]="{'btn-info':node.isLocked == true ,'btn-danger':node.isLocked == false}"
(mouseover)="display($event, node)">

The first class is the
property of the

*ngFor="let node of warriorNodesList"

The second is a conditional expression:

[ngClass]="{'btn-info':node.isLocked == true ,'btn-danger':node.isLocked == false}

How can I add all of that in only one
? It seems that only one
gets bound to an element and the other is ignored.

Answer Source

This should do what you want:

[ngClass]="[, node.isLocked == true ? 'btn-info' : 'btn-danger' ]"
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download