I am facing an issue with the button's class change functionality. I am using the [ngClass] directive to switch between Bootstrap classes for the button style. However, when I click the button, the "btn" class seems to disappear from the code. Instead of getting 'btn-success btn', I only get 'btn-success'. The button also plays a role in toggling the visibility of a paragraph containing random text.
Below is my TypeScript 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 my HTML code:
onClick(event: Event) {
this.showPass=!this.showPass;
this.status = this.showPass ? "Show me!" : "Hide me!"
console.log(this.showPass)