Change button style depending on variable value

March 22, 2022

I have 5 buttons as follow:

<div class="card-body pt-0">
    <button class="btn btn-secondary mr-2" (click)="opt=0">My Profile</button>
    <button class="btn btn-secondary mr-2" (click)="opt=1">Company Profile</button>
    <button class="btn btn-secondary mr-2" (click)="opt=2">Payment </button>
    <button class="btn btn-secondary mr-2" (click)="opt=3">Licenses</button>
    <button class="btn btn-secondary mr-2" (click)="opt=4">E&O Coverage</button>
</div>

When a button is clicked, it changes the value of opt.

I tried NgClass and [className] to change the class of a button to btn-info depending on the value of opt, but I cant make it work for a button when its clicked.

[ngClass]="{
  'btn-info': opt==1
}"

Thanks.

>Solution :

Try this one out

<div class="card-body pt-0">
    <button class="btn btn-secondary mr-2" [class.btn-info]="opt==0" (click)="opt=0">My Profile</button>
    <button class="btn btn-secondary mr-2" [class.btn-info]="opt==1" (click)="opt=1">Company Profile</button>
    <button class="btn btn-secondary mr-2" [class.btn-info]="opt==2" (click)="opt=2">Payment </button>
    <button class="btn btn-secondary mr-2" [class.btn-info]="opt==3" (click)="opt=3">Licenses</button>
    <button class="btn btn-secondary mr-2" [class.btn-info]="opt==4" (click)="opt=4">E&O Coverage</button>
</div>