Set specific class depending on boolean variable

Question

I have an array with names and same array with statuses (true, false). I am iterating through all names and creating buttons, and I want the button class to be btn-success if status of that element is true, and btn-danger if it is false. How can I make it? I tried with [ngClass] but it does not work.

app.component.html:

<div
        *ngFor="let element of elements; let index = index"
        (click)="changeStatus(index)"
        [ngClass]="{'btn-success':statuses[index]===true}"
        [ngClass]="{'btn-danger':statuses[index]===false}">
        {{element}}
</div>

arrays in app.component.ts

  elements = ['Element 1', 'Element 2', 'Element 3', 'Element 4', 'Element 5'];
  statuses = [false, false, false, false, false];

Lia · Accepted Answer · 2018-05-26 11:51:34Z

5

<button
        *ngFor="let element of elements; let index = index"
        [ngClass]="statuses[index]?'btn-success':'btn-danger'">
        {{element}}
</button>

answered May 26, 2018 at 11:51

Lia

12k3 gold badges36 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user184994 · Accepted Answer · 2018-05-26 11:40:48Z

2

You can't use 2 of the ngClass directive.

The value that is passed to ngClass is just an object, so you need to comma separate the values within it, like so:

[ngClass]="{'btn-success':statuses[index]===true, 
            'btn-danger':statuses[index]===false}"

Here is a StackBlitz demonstration

edited May 26, 2018 at 11:40

answered May 26, 2018 at 11:35

user184994

18.3k2 gold badges51 silver badges54 bronze badges

Collectives™ on Stack Overflow

Set specific class depending on boolean variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related