CODEWITHSUNDEEP
angular
Pablo Varela
Pablo Varela

Reputation: 658

Change button style depending on variable value

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.

Upvotes: 1

Views: 477

Answers (1)

Danielle
Danielle

Reputation: 1496

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>

Upvotes: 2

Related Questions