Angular: "btn" class disappear after toggled the button

August 31, 2022

I have an issue with the class changing button. I use the [ngClass] directive to change the button style ( Bootstrap classes). But when I click the button, the "btn" class disappears from the code, so instead get ‘btn-success btn’, I get only ‘btn-success’. The button also takes a part in showing and hiding a paragraph with random text.

This is TS code:

<button type="button"
  (click)="onClick($event)"
  [ngClass]="{'btn-success btn': showPass, 'btn-danger btn': !showPass }">{{status}}
</button>

<p [hidden]="showPass"  >Secret password</p>```

and this is HTML:

  onClick(event: Event) {

    this.showPass=!this.showPass;
    this.status = this.showPass ? "Show me!" : "Hide me!"
    console.log(this.showPass)

>Solution :

If the btn class is always going to be there, you can just do this instead:

<button type="button"
  (click)="onClick($event)"
  class="btn"
  [ngClass]="{'btn-success': showPass, 'btn-danger': !showPass }">{{status}}
</button>