Angular ngClass boolean dont detection

Question

I have an icon "fa-duotone fa-rotate-right", and I want when changing "loading = true", the class "fa-spin" is added, everything works ok, but when it becomes "false" it does not stop, I'm a beginner in Angular, don't discuss much, maybe you know how you can decide or tell me. Thanks

Html

 <button mat-fab color="primary" class="float-end"  (click)="load()">
     <mat-icon class="fa-duotone fa-rotate-right" [ngClass]="loading  ? 'fa-spin' : ''"></mat-icon>
 </button>

Typescript

  load(): void {
    this.loading = true;
    this.productsService.getProducts().subscribe(
      (response: any) => {
        this.dataSource = new MatTableDataSource(response.products);
        this.dataSource.paginator = this.paginator;
        this.loading = false;
        this.selection.clear();
      },
      error => {
        this.alertService.error('Server error in Getting Products');
      }
    );
  }

Answer 1

Your syntax for ngClass is not correct. Try this:

<mat-icon 
  class="fa-duotone fa-rotate-right"
  [ngClass]="{'fa-spin': loading}"
>
</mat-icon>

Answer 2

In your exemple, the sintax of the [ngClass] it's wrong. Change to this:

<button mat-fab color="primary" class="float-end" (click)="load()">
    <mat-icon class="fa-duotone fa-rotate-right" [ngClass]="{'fa-spin': loading}"></mat-icon>
</button>

I did this change and is working, probly your problem is that the your query returning a error, and than try set "loading = false" inside error code:

 load(): void {
    this.loading = true;
    this.productsService.getProducts().subscribe(
      (response: any) => {
        this.dataSource = new MatTableDataSource(response.products);
        this.dataSource.paginator = this.paginator;
        this.loading = false;
        this.selection.clear();
      },
      error => {
        this.loading = false;
        this.alertService.error('Server error in Getting Products');
      }
    );
  }

Good luck:)