仅将CSS类应用于单击的按钮

Question

I'm trying to apply a CSS class only to the button that was clicked (to set it active).

Here's my code:

filter.component.html

<div class="button-container">
    <button class="rules" [class.active]="active" (click)="toggleActive()" type="button">Rules</button>
    <button class="dailies" [class.active]="active" (click)="toggleActive()" type="button">Dailies</button>
    <button class="emotions" [class.active]="active" (click)="toggleActive()" type="button">Emotions</button>
</div>

filter.component.ts

export class FilterComponent {
    active: boolean = false;

    toggleActive(): void {
      this.active = !this.active;
    } 
  constructor() {}
}

My problem is, the class gets applied to all 3 buttons. And the active class looks different on each of the buttons. How can I fix this?

Answer 1

You can do it this way :

Template side :

<div class="button-container">
    <button class="rules" [class.active]="active.rules" (click)="toggleActive('rules')" type="button">Rules</button>
    <button class="dailies" [class.active]="active.dailies" (click)="toggleActive('dailies')" type="button">Dailies</button>
    <button class="emotions" [class.active]="active.emotions" (click)="toggleActive('emotions')" type="button">Emotions</button>
</div>

Component side :

active = {};

toggleActive(el): void {
    this.active[el] = this.active[el] ? false : true;
} 

WORKING DEMO

Answer 2

Try using an event to get the current clicked element as follows:

toggleActive($event) {
   var element = $event.target;
   element.active = !element.active;
};