Toggle colors on multiple buttons - css

Question

How can I toggle background color on multiple buttons.( reference images )
I have set of buttons. Once user click on any button it change the background color and if click again on same button other button the first clicked button reset to original color and change the 2nd click button.
code
<span class="input-group-btn">
<button
class="btn btn-sm btn-primary mr-2"
(click)="selectToday('approved')"
>
Select Today
</button>
<button
class="btn btn-sm btn-primary mr-2"
(click)="selectWeek('approved')"
>
To Current Week
</button>
<button
class="btn btn-sm btn-primary mr-2"
(click)="selectMonth('approved')"
>
To Current Month
</button>
<button
class="btn btn-sm btn-primary mr-2"
(click)="AllTime('approved')"
>
All Time
</button>
</span>
Can anyone give me clue how to bind the class with each other
image

Answer 1

You can make it dynamic like this:
Working Demo
TS:
selected = null
buttons = ["Selecct Today", "Current Week", "Current Week", "All Time"];
Template:
<ng-container *ngFor="let btn of buttons;let i=index">
<button [style.background-color]="selected == i ? 'green' : 'red'" (click)=" selected == i? selected = null:selected = i">
{{btn}}
</button>
</ng-container>
To change the color of next button on deselection of already selected btn, try this:
<ng-container *ngFor="let btn of buttons;let i=index">
<button [style.background-color]="selected == i ? 'green' : 'red'" (click)=" selected == i? selected = i + 1:selected = i">
{{btn}}
</button>
</ng-container>

Answer 2

You can use radio button and customize it's display style instead of using Button directly. I am sure i will solve your problem. Just refer to this link:
Convert Radio button to Button

Answer 3

Give an index or id to each button and give the index on click
(click)="enableDisableRule(2)"
in your ts, save the index:
enableDisableRule(selectedIndex:number){
...
if(this.selectedIndex = selectedIndex){
this.selectedIndex = null;
} else{
this.selectedIndex = selectedIndex;
}
}
And in your html, update you button acording to selectedIndex:
[style.background-color]="selectedIndex === 2 ? 'green' : 'red'"
Or something in this spirit.