Angular: Toggle active class on only button the current clicked button (not using *ngFor)
Simple, just use Event Delegation.
Component.html:
<div class="btn-group" (click)="onButtonGroupClick($event)">
<button class="btn btn-secondary" type="button">Premier bouton</button>
<button class="btn btn-secondary" type="button">Second bouton</button>
<button class="btn btn-secondary" type="button">Troisième bouton</button>
<button class="btn btn-secondary" type="button">Quatrième bouton</button>
</div>
Component.ts/.js:
onButtonGroupClick($event){
let clickedElement = $event.target || $event.srcElement;
if( clickedElement.nodeName === "BUTTON" ) {
let isCertainButtonAlreadyActive = clickedElement.parentElement.querySelector(".active");
// if a Button already has Class: .active
if( isCertainButtonAlreadyActive ) {
isCertainButtonAlreadyActive.classList.remove("active");
}
clickedElement.className += " active";
}
}
Live example: https://plnkr.co/edit/EE4dOMgpY8QA2qZXjMiW?p=preview
I would just use a unique string for each button. For example:
<div class="btn-group">
<button class="btn btn-secondary" [class.active]="isActive('btn1')" (click)="setActive('btn1')" type="button">Premier bouton</button>
<button class="btn btn-secondary" [class.active]="isActive('btn2')" (click)="setActive('btn2')" type="button">Second bouton</button>
<button class="btn btn-secondary" [class.active]="isActive('btn3')" (click)="setActive('btn3')" type="button">Troisième bouton</button>
<button class="btn btn-secondary" [class.active]="isActive('btn4')" (click)="setActive('btn4')" type="button">Quatrième bouton</button>
</div>
Your setActive
and Isactive
functions would look something like this:
this.setActive = function (buttonName){
this.activeButton = buttonName;
}
this.isActive = function (buttonName){
return this.activeButton === buttonName;
}
So each button will pass its name, which is just some unique string. That string will be saved as a variable and will be used to determine if the active class should be applied.
Also you will notice you can toggle individual classes by binding to the class name. Like I did above for the active class, it can be bound with [class.active].