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

Here: plnkr.co/edit/lX3DjN46STmo6gfBkPCc?p=preview

Cheese Fox
– Cheese Fox

2017-12-11 12:47:24 +00:00
Commented Dec 11, 2017 at 12:47 — Cheese Fox
– Cheese Fox, Commented Dec 11, 2017 at 12:47
A similar answer can be found here

Aravind
– Aravind

2017-12-11 12:50:32 +00:00
Commented Dec 11, 2017 at 12:50 — Aravind
– Aravind, Commented Dec 11, 2017 at 12:50

Paka · Accepted Answer · 2017-12-11 13:23:05Z

8

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

answered Dec 11, 2017 at 13:23

Paka

1,05311 silver badges20 bronze badges

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

Comments

Kirk Larkin · Accepted Answer · 2019-09-02 20:59:30Z

3

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.

edited Sep 2, 2019 at 20:59

answered Dec 11, 2017 at 12:54

Kirk Larkin

94.4k17 gold badges235 silver badges214 bronze badges

Collectives™ on Stack Overflow

Adding the active class to each clicked button, Angular 4

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related