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]="{'btn-info':node.isLocked == true ,'btn-danger':node.isLocked == false}"
(mouseover)="display($event, node)">

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

***ngFor="let node of warriorNodesList"

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.isLocked == true ? 'btn-info' : 'btn-danger' ]"
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download