Hello I need to create toggle buttons, but when I click first button active class works for both element.
HTML
<button [class.active]="k" (click)="toggle()">1</button>
<button [class.active]="k" (click)="toggle()">2</button>
TS
k: boolean = false;
toggle(): void {
this.k = !this.k;
}
<button (click)="toggle($event)">1</button>
<button (click)="toggle($event)">2</button>
TS:
toggle(event): void {
event.target.classList.toggle("active");
}
You need to either use two different variables or an array to bind to.
With separate variables
<button [class.active]="k1" (click)="k1 = !k1">1</button>
<button [class.active]="k2" (click)="k2 = !k2">2</button>
k1: boolean = false;
k2: boolean = false;
With array
<button [class.active]="k[0]" (click)="toggle(0)">1</button>
<button [class.active]="k[1]" (click)="toggle(1)">2</button>
k: boolean[] = [];
toggle(index: number): void {
this.k[index] = !this.k[index];
}
Use a unique string for separate buttons
<button [class.active]="button1" (click)="toggle("button1")">1</button>
<button [class.active]="button2" (click)="toggle("button2")">2</button>
And your function can be modified as
toggle(button): void {
this.button = !this.button;
}
Note: I'm just providing you a idea that you should pass different values for separate buttons.
