title: ExpressionChangedAfterItHasBeenCheckedError with Angular 6 and redirect
body: <p>I can see there is tons of posts on this subject, but mostly related to async service calls. I have an app component that takes care of login to Azure AD. When a user clicks login they are redirected to the login page of Azure and redirected back to a component called AuthCallBack. The AuthCallBack will call a method on the AppComponenet that simply sets a boolean value called userIsLoggedIn and I use this in a ngIf. I get the following error ExpressionChangedAfterItHasBeenCheckedError. Because its not some kind of http async call I dont have the subscripe option, what todo?</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td routerLink="/"&gt;Login page&lt;/td&gt;
      &lt;td routerLink="/dashboard"&gt;Dashboard&lt;/td&gt;
      &lt;td (click)="login()"&gt;Login&lt;/td&gt;
      &lt;td (click)="logout()"&gt;Logout&lt;/td&gt;
      &lt;td&gt;&lt;span *ngIf="userIsLoggedIn"&gt;Logged in&lt;/span&gt;&lt;/td&gt;
  
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="5"&gt;
         &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>AppComponent</p>
  
  <pre><code>import { Component,OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  import { AdalService } from 'adal-angular4';
  import { environment } from '../environments/environment';
  import { Observable } from 'rxjs';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  export class AppComponent {
  
    config = {
      tenant: 'xx-a8b0-4555-97b3-70001a6a7448',
      clientId: 'xx-65b4-4914-905c-aecc3e9197f5',
      redirectUri: "http://localhost:4200/authcallback/",
      logOutUri: "http://localhost:4200",
      postLogoutRedirectUri: "http://localhost:4200",
      endpoints: {
        "http://localhost:63126/": "xx-65b4-4914-905c-aecc3e9197f5"
      }};
  
    userIsLoggedIn: Observable&lt;boolean&gt;;
  
    constructor(private adalService: AdalService,private router: Router)
    {
      this.adalService.init(this.config); 
    }
  
    ngOnInit() {     
    }
  
    handleWindowCallback()
    {    
      this.adalService.handleWindowCallback();
      this.userIsLoggedIn = this.adalService.userInfo.authenticated;
  
    }
  
    login()
    {   
      this.adalService.login();
    }
  
    logout()
    {
      this.adalService.logOut();
    }
  }
  </code></pre>
  
  <p>AuthComponent</p>
  
  <pre><code>import { Component, OnInit, NgZone } from '@angular/core';
  import { AppComponent } from '../app.component';
  import { Router } from '@angular/router';
  import { AdalService } from 'adal-angular4';
  
  @Component({
    selector: 'app-auth-callback',
    templateUrl: './authcallback.component.html',
    styleUrls: ['./authcallback.component.css']
  })
  export class AuthCallbackComponent implements OnInit {
  
    constructor(private appComponent: AppComponent,private router: Router, private adalService: AdalService, private _zone: NgZone) { }
  
     ngOnInit() {
  
      this.appComponent.handleWindowCallback();
  
      //this.adalService.handleWindowCallback();
  
      setTimeout(() =&gt; {
        this._zone.run(
          () =&gt; this.router.navigate(['/'])
        );
      }, 200);
    } 
  }
  </code></pre>