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].