firasKoubaa firasKoubaa - 3 years ago 164
TypeScript Question

Angular 4 : Using Two ngClass : one to add literally a class and the other within expression

I want to add dynmaically to classes to my button.

One classe literally , and the other within condition.

here is my code :

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


1. The first class : is the name of my variable (node) :

***ngFor="let node of warriorNodesList"
[ngClass]="node.name**


2. The second : is a conditionnal one with expression:

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


How can i add all that in only one "ngClass" , since it seems that only one ngClass is binded

Suggestions ??

Answer Source

This should do what you want:

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