Toggle

Class Binding with ng-template and ngIf

Method #1

<ng-template #wishlisted><i class="fa-solid fa-star"></i></ng-template>
<button 
    (click)="isActive = !isActive"
    [class.active]="isActive"
    class="btn btn-dark btn-lg m-3">
        <i *ngIf="!isActive; else wishlisted" class="fa-regular fa-star"></i>
</button>

Method #2

<button 
    (click)=onClick()
    class="btn btn-dark btn-lg m-3">
        <i class="fa-star"
            [class.fa-solid]="isActive"
            [class.fa-regular]="!isActive"
        ></i>
</button>

export class AppComponent {
  isActive: boolean = false;

  onClick(){
    this.isActive = !this.isActive;
  }
}

TS

export class AppComponent {
  isActive: boolean = false;
}

HTML

<button 
    (click)="toggleClass = !toggleClass" 
    [ngClass]="{ 'show' : !toggleClass }">
        Toggle Class
</button>

TS

export class YourComponent{
    toggleClass: boolean = false;
}

Toggle Class with HostListener and Hostbinding

Show / hide elements by clicking a button

Toggling button functionality

src/app/app.component.html

<!-- Bind button disabled state to `isUnchanged` property -->
<button type="button" [disabled]="isUnchanged">Disabled Button</button>

Because the value of the property isUnchanged is true in the AppComponent, Angular disables the button.

src/app/app.component.ts

isUnchanged = true;