Adding the active class to each clicked button, Angular 4

Question

I have:

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

Result:

10x button on screen.

When I click on the button number 1: Each button will get class ".active"

But I would like:

When I click button number 1: will get class ".active".

When I click button number 3: will get class ".active".

When I click button number 6: will get class ".active".

Result:

Button 1, Button 3, Button 6 - Each this buttons will get class ".active"

How to do that?

PLUNKER: https://plnkr.co/edit/lX3DjN46STmo6gfBkPCc?p=preview

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!!