title: ExpressionChangedAfterItHasBeenCheckedError error because of loader interceptor in angular 6
body: <p>I have an angular 6 project. And I create an interceptor for showing 'loading' panel.But because of this loading panel, I'm taking this error <code>ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'</code> .How can I fix this?</p>
  
  <p><strong>My interceptor</strong></p>
  
  <pre><code>export class LoaderInterceptor implements HttpInterceptor {
    constructor(private ch: CommonHelper) { }
  
      intercept(request: HttpRequest &lt; any &gt;, next: HttpHandler): Observable &lt; HttpEvent &lt; any &gt;&gt; {
        this.ch.showLoader();
        return next.handle(request)
          .pipe(
            tap((event: HttpEvent&lt;any&gt;) =&gt; {
              if (event instanceof HttpResponse) {
                this.ch.hideLoader();
              }
            }, (error: any) =&gt; {
              if (error instanceof HttpErrorResponse) {
                this.ch.messageHelper.showErrorMessage('Error Occured');
              }
              this.ch.hideLoader();
            })
          );
      }
  }
  </code></pre>
  
  <p><strong>My show and hide methods</strong></p>
  
  <pre><code>showLoader() {
      this.globals.displayLoader = true;
    }
  
  hideLoader() {
      this.globals.displayLoader = false;
    }
  </code></pre>
  
  <p><strong>My layout.html</strong></p>
  
  <pre><code> &lt;div class="loading-screen" *ngIf="ch.globals.displayLoader"&gt;
      &lt;div class="loading-loader"&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>