title: Angular 4 - "Expression has changed after it was checked" error while using NG-IF
body: <p>I setup a <code>service</code> to keep track of logged in users. That service returns an Observable and all components that <code>subscribe</code> to it are notified <em>(so far only a single component subscribe to it)</em>.</p>
  
  <p><strong>Service:</strong></p>
  
  <pre><code>private subject = new Subject&lt;any&gt;();
  
  sendMessage(message: boolean) {
     this.subject.next( message );
  }
  
  getMessage(): Observable&lt;any&gt; {
     return this.subject.asObservable();
  } 
  </code></pre>
  
  <p><strong>Root App Component:</strong> (this component subscribes to the observable)</p>
  
  <pre><code>ngAfterViewInit(){
     this.subscription = this._authService.getMessage().subscribe(message =&gt; { this.user = message; });
  }
  </code></pre>
  
  <p><strong>Welcome Component:</strong> </p>
  
  <pre><code>ngOnInit() {
    const checkStatus = this._authService.checkUserStatus();
    this._authService.sendMessage(checkStatus);
  }
  </code></pre>
  
  <p><strong>App Component Html:</strong> (this is where the error occurs)</p>
  
  <pre><code>&lt;div *ngIf="user"&gt;&lt;div&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>What I'm trying to do:</strong></p>
  
  <p>I want every component (<em>except the Root App Component</em>) to send the users logged-in state to the Root App Component so I can manipulate the UI within the Root App Component Html.</p>
  
  <p><strong>The issue:</strong></p>
  
  <p>I get the following error when the <strong>Welcome Component</strong> is initialised.</p>
  
  <pre><code>Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'true'.
  </code></pre>
  
  <p>Please note this error occurs on this <code>*ngIf="user"</code> expression which is located within Root App Components HTML file. </p>
  
  <p><strong>Can someone explain the reason for this error and how I can fix this?</strong></p>
  
  <p>On a side note: If you think theres a better way to achieve what I'm trying to do then please let me know.</p>
  
  <p><strong>Update 1:</strong></p>
  
  <p>Putting the following in the <code>constructor</code> solves the issue but don't want to use the <code>constructor</code> for this purpose so it seems it's not a good solution.</p>
  
  <p><strong>Welcome Component:</strong></p>
  
  <pre><code>constructor(private _authService: AuthenticationService) {
    const checkStatus = this._authService.checkUserStatus();
    this._authService.sendMessage(checkStatus);
   }
  </code></pre>
  
  <p><strong>Root App Component:</strong></p>
  
  <pre><code>constructor(private _authService: AuthenticationService){
     this.subscription = this._authService.getMessage().subscribe(message =&gt; { this.usr = message; });
  }
  </code></pre>
  
  <p><strong>Update 2:</strong></p>
  
  <p>Here's the <a href="https://plnkr.co/edit/5P2zWvpgMPz8e450xETD?p=preview" rel="noreferrer">plunkr</a>. To see the error check the browser console. When the app loads a boolean value of true should be displayed but I get the error in the console.</p>
  
  <p><strong>Please note that this plunkr is a very basic version of my main app. As the app is bit large I couldn't upload all the code. But the plunkr demonstrates the error perfectly.</strong></p>