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');
      }
    );
  }

Reading the documentation for ngClass would go a long way toward answering this question... — Heretic Monkey
– Heretic Monkey, Commented Sep 20, 2022 at 18:59

NeNaD · Accepted Answer · 2022-09-20 18:55:55Z

0

Your syntax for ngClass is not correct. Try this:

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

answered Sep 20, 2022 at 18:55

NeNaD

20.8k11 gold badges64 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Artur Over a year ago

It does not work, the icon continues to spin (animation), that is, at first it is true, then when it becomes false it should stop, but the animation continues to work anyway.

NeNaD Over a year ago

Are you completely sure that you are getting success response from the server? Maybe you are getting error, and you don't set loading to false in the error handler.

Artur Over a year ago

I need fa-spin to work somehow asynchronously, at first it is always true, but after a few seconds when I get a response from the back-end, it becomes false, but the class inside the icon still remains

Artur Over a year ago

There are no errors, since I receive products from the backend and successfully show in the table

NeNaD Over a year ago

Wait.... I am not sure, but can you try to remove fa-rotate-right class? Maybe that class is also adding spinner. And that class is always present.

|

david pontes · Accepted Answer · 2022-09-20 19:27:26Z

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 :)

Collectives™ on Stack Overflow

Angular ngClass boolean dont detection

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related