title: Updating boolean in AfterViewInit causes "Expression has changed after it was checked"
body: <p>I have a simple alert component which I'm creating dynamically in the view. Since it's created dynamically I've set an option to automatically display the alert after it has been initialised.</p>
  
  <p>Although it's working I'd like to understand why I have to manually trigger the change detection in this particular case.</p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>export class OverlayMessageComponent implements AfterViewInit {
      ...
  
      ngAfterViewInit() {
          if(this.autoShow) {
              this.show();
          }
          this.changeDetector.detectChanges();
      }
  
      ...
  }
  </code></pre>
  
  <p><strong>Full Sample:</strong> <a href="https://plnkr.co/edit/8NvfhDvLVBd71I7DR0kW" rel="noreferrer">https://plnkr.co/edit/8NvfhDvLVBd71I7DR0kW</a></p>
  
  <p>I had to add <code>this.changeDetector.detectChanges();</code> as I was getting the following error:</p>
  
  <blockquote>
    <p>EXCEPTION: Expression has changed after it was checked.</p>
  </blockquote>
  
  <p>I was under the impression that using <code>AfterViewInit</code> helps avoiding the issue, but I think I'm assuming wrong. Is there a way to structure the code better to avoid this error?</p>
  
  <p>I'd like to understand better why this error is returned. I've seen this error a few times before, and I know that some say that with a <code>setTimeout()</code> or <code>enableProdMode()</code> does solve the issue, but to me it seems a hacky workaround when the framework itself is notifying you that there's a problem.</p>