ExpressionChangedAfterItHasBeenCheckedError when you combine onLazyLoad and loading tags

[Michael-Ziluck]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)

https://stackblitz.com/edit/github-ap6ryb

Current behavior
When you set loading = true within the onLazyLoad callback, Angular throws an ExpressionChangedAfterItHasBeenCheckedError.

Expected behavior
No such error should be thrown.

Minimal reproduction of the problem with instructions
See the stackblitz link above.

What is the motivation / use case for changing the behavior?
Being able to display the loading spinner while the content is loading should be a pretty standard feature.

Temporary Workaround:
Wrap everything within the callback method in a setTimeout block. Here is a forked version of the stackblitz I linked above that has this change: https://stackblitz.com/edit/github-ap6ryb-khx7a2

Please tell us about your environment:
Every environment encounters this error.

• Angular version: All versions.

• PrimeNG version: All versions

• Browser: All

• Language: All

This issue is similar to #3293 and #3041 but they are NOT the same. I did my research to make sure there are no existing issues and if there are solutions online.

I am aware of the fact that you can either use ChangeDetectorRef or simply wrap it in a setTimeout block. However, I feel like this should be supported natively. It seems odd that you can't combine them without using other workarounds.

[cagataycivici]

Should be fixed on your side I think;

lazyLoadCallback(event) {
        Promise.resolve(null).then(() => this.loading = true);

[Michael-Ziluck]

@cagataycivici So your recommended solution is to update the value outside of Angular's change detection scope rather than fix the lifecycle hooks?...

[adamturski]

@Michael-Ziluck I had the same issue and in my case initialize loading variable with true in variable definition solved the issue, I know that this should work either way but at least it is a good workaround, no need for setTimeout.
loading: boolean = true;

[majkers]

@cagataycivici So your recommended solution is to update the value outside of Angular's change detection scope rather than fix the lifecycle hooks?...

This is really sick!. I have a http interceptor to fire loading indicator for all http request. More or less it looks like this:

intercept(httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (httpRequest.url.indexOf('/assets') == -1) {
      return this.loadingService.showLoaderUntilCompleted(next.handle(httpRequest));
    }
    return next.handle(httpRequest);
  }

and

 showLoaderUntilCompleted<T>(obs$: Observable<T>): Observable<T> {
    return of(null)
      .pipe(
        tap(() => this.loadingOn()),
        concatMap(() => obs$),
        finalize(() => this.loadingOff())
      );
  }

and me too I get the same error because of wrong lifecycle hooks. And I had to use setTimeout to make it work. @cagataycivici keep in mind that people may want to use their solutions with loading indicator so it sholud work as expected!