title: ExpressionChangedAfterItHasBeenCheckedError on Angular 8 and method called on ngOnInit
body: <p>I'm facing some common issue on Angular template, I have this general template for all my pages and inside of it I have a *ngIf with a spinner inside and another one with my router-outlet.</p>
  
  <p>The interceptor controlls the behavior and visibility of the spinner, so with that comes the error, in a specific component I subscribe on a http method on a ngOnInit and the result of that is the error.</p>
  
  <p>This error just happen if I call some method on lifecycle methods.
  I already tried some workarounds like envolve the setSpinnerState with setTimeout and tried to use other lifecycle hooks(AfterViewInit,  AfterContentInit...).</p>
  
  <p>The interceptor</p>
  
  <pre><code>export class InterceptorService implements HttpInterceptor {
  
    intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): import('rxjs').Observable&lt;HttpEvent&lt;any&gt;&gt; {
      this.layoutService.setSpinnerState(true);
      return next.handle(this.handlerRequest(req)).pipe(
        delay(3000),
        finalize(() =&gt; {
          this.layoutService.setSpinnerState(false);
        })
      );
    }
  
    constructor(private authService: AuthService, private layoutService: LayoutService) { }
  
    private handlerRequest(req: HttpRequest&lt;any&gt;) {
      let request;
      if (this.authService.isLoggedIn() &amp;&amp; !req.url.includes('/assets/i18n/')) {
        request = req.clone({
          url: environment.api.invokeUrl + req.url,
          headers: req.headers.append('Authorization', 'Bearer ' + this.authService.getAcessToken())
        });
      } else if (req.url.includes('/assets/i18n/')) {
        request = req.clone();
      } else {
        request = req.clone({
          url: environment.api.invokeUrl + req.url
        });
      }
      return request;
    }
  
  }
  
  </code></pre>
  
  <p>Layout Service:</p>
  
  <pre><code>export class LayoutService {
  
    private isSpinner: boolean = true;
  
    constructor() { }
  
    public setSpinnerState(state: boolean): void {
      this.isSpinner = state;
    }
  
    public getSpinnerState():boolean{
      return this.isSpinner;
    }
  
  
  }
  </code></pre>
  
  <p>The general template(LayoutComponent)</p>
  
  <pre><code>&lt;div class="page-wrapper fixed-nav-layout"&gt;
      &lt;app-header (toggleEvent)="receiveToggle($event)"&gt;&lt;/app-header&gt;
      &lt;!--Page Body Start--&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="page-body-wrapper sidebar-icon" [class.sidebar-close]="toggle"&gt;
              &lt;app-sidebar class="page-sidebar page-sidebar-open"&gt;&lt;/app-sidebar&gt;
              &lt;div class="page-body p-t-10"&gt;
                  &lt;app-breadcrumb&gt;&lt;/app-breadcrumb&gt;
                  &lt;router-outlet  *ngIf="!layoutService.getSpinnerState()"&gt;&lt;/router-outlet&gt;
                  &lt;div class="loader-box d-flex justify-content-center align-self-center" *ngIf="layoutService.getSpinnerState()" async&gt;
                      &lt;div class="loader"&gt;
                          &lt;div class="line bg-default"&gt;&lt;/div&gt;
                          &lt;div class="line bg-default"&gt;&lt;/div&gt;
                          &lt;div class="line bg-default"&gt;&lt;/div&gt;
                          &lt;div class="line bg-default"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--Page Body End--&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The component with the subscribe method</p>
  
  <pre><code>export class EditProfileComponent implements OnInit {
  
    public userProfile = new UserProfile();
  
    constructor(private userService: UserService) {
    }
  
    ngOnInit() {
      this.getUser();
    }
  
    public getUser() {
      // debugger
      this.userService.getUser().subscribe(data =&gt; {
        this.userProfile = Amazon.feedUser(data);
      }, err =&gt; {
        return new ErrorHandler().show(err.message);
      });
    }
  }
  </code></pre>
  
  <p>And the error stack</p>
  
  <pre><code>ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: true'. Current value: 'ngIf: false'.
      at viewDebugError (core.js:28792)
      at expressionChangedAfterItHasBeenCheckedError (core.js:28769)
      at checkBindingNoChanges (core.js:29757)
      at checkNoChangesNodeInline (core.js:44442)
      at checkNoChangesNode (core.js:44415)
      at debugCheckNoChangesNode (core.js:45376)
      at debugCheckDirectivesFn (core.js:45273)
      at Object.eval [as updateDirectives] (LayoutsComponent.html:10)
      at Object.debugUpdateDirectives [as updateDirectives] (core.js:45258)
      at checkNoChangesView (core.js:44248)
  </code></pre>
  
  <p>At last I tried ChangeDetectorRef on LayoutComponent, but error doesn't changed.</p>
  
  <pre><code>export class LayoutsComponent implements OnChanges {
  
    public toggle;
    openToggle: boolean;
  
    constructor(public navService: NavService, public layoutService: LayoutService, private cd: ChangeDetectorRef) {
      if (this.navService.openToggle === true) {
        this.openToggle = !this.openToggle;
        this.toggle = this.openToggle;
      }
    }
  
    ngOnChanges(): void {
      this.cd.detectChanges();
    }
  
    receiveToggle($event) {
      this.openToggle = $event;
      this.toggle = this.openToggle;
    }
  
  }
  </code></pre>
  
  <p>The error reproduced on stackblitz:
  <a href="https://stackblitz.com/edit/angular-xyulo9" rel="noreferrer">https://stackblitz.com/edit/angular-xyulo9</a></p>