Toggle text of button with ngClass in Angular

Question

How would I change the text of a toggled class of a button in Angular, so far I have the following to toggle the class, I am using Bootstrap:

html

<!-- toggle button --> 
<button type="button" class="btn btn-primary mt-3 ml-3" (click)="status=!status;" [ngClass]="status ? 'btn-info' : 'btn-primary'"  [disabled]="clicked">Primary</button>
<!-- toggle button --> 

Any idea's?

Answer 1

Your code for ngClass is wrong and i corrected this,

Also if you want to change the text of button you can do it like this :

    <button type="button" class="btn btn-primary mt-3 ml-3" (click)="status=!status;" [ngClass]="{'btn-info' : status, 'btn-primary' : !status}"  [disabled]="clicked">{{status ? 'Info' : 'Primary'}}</button>