Angular async pipe doesn't trigger change detection

Question

I have this class binding which should animate my image while loading, but it never trigger.

<img [class.animated]="loader.isLoading$ | async" src="...">

Loader :

public get isLoading$(): Observable<boolean> {
    return this._isLoading$.pipe(
      // If the data arrives successfully earlier than in 250ms, no indicator should be shown
      switchMap(isLoading => isLoading ? of(true).pipe(delay(250)) : of(false))
    );
  }

Using vanilla javascript works (so I guess the Loader code is fine) :

ngAfterViewInit(): void {
    this.loader.isLoading$.subscribe(
        isLoading => {
          const img = document.querySelector('img') as HTMLImageElement;

          if (isLoading) {
            img.classList.add('animated');
          }
          else {
            img.classList.remove('animated');
          }
        }
    );
}

edit : The class binding works without the delay(250), why ?

Where am I doing wrong with the class binding ? Even with ChangeDetectionStrategy.Default it doesn't work.

Thanks for any explanation.

martin · Accepted Answer · 2021-07-03 08:58:05Z

1

isLoading$() is a getter so it's going to be called every time change detection cycle is triggered and it will return a new RxJS chain. async will unsubscribe from the previous one and subscribe to the new one (that will probably emit after this._isLoading$ emits again).

So keep just one chain. Maybe make a local variable using isLoading$() in your component.

answered Jul 3, 2021 at 8:58

martin

97.4k26 gold badges205 silver badges237 bronze badges

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

Collectives™ on Stack Overflow

Angular async pipe doesn't trigger change detection

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related