Adding the active class to each clicked button, Angular 4

Question

I have:

Answer 1

Just maintain a temporary array

<button *ngFor="let button of [1,2,3,4]; let i = index" [ngClass]="{'active':isClicked[i]}" (click)="isClicked[i] = (isClicked[i]? false :true )">button</button>

in component public isClicked = [];

working fiddler --> https://plnkr.co/edit/MwuWhtBPPQUQCG2Y9qmx?p=preview

Hope it helps!!

Answer 2

When you use (click)="isClicked = !isClicked", you set a single isClicked property on the component that is used by all buttons. Instead, expand your buttons array to an array of objects:

buttons = [
    { text: 'item1', isClicked: false },
    { text: 'item2', isClicked: false },
    { text: 'item3', isClicked: false },
    // ...
]

With this, each button has its own isClicked property, which you can use like this:

<button *ngFor="let button of buttons" [ngClass]="{'active': button.isClicked}" (click)="button.isClicked = !button.isClicked">
    {{ button.text }}
</button>

Here's an updated plunker.