Change button style depending on variable value-CodePudding

I have 5 buttons as follow:

<div >
    <button  (click)="opt=0">My Profile</button>
    <button  (click)="opt=1">Company Profile</button>
    <button  (click)="opt=2">Payment </button>
    <button  (click)="opt=3">Licenses</button>
    <button  (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.

CodePudding user response：

Try this one out

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