title: ExpressionChangedAfterItHasBeenCheckedError Explained
body: <p>Please explain to me why I keep getting this error: <code>ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.</code></p>
  
  <p>Obviously, I only get it in dev mode, it doesn't happen on my production build, but it's very annoying and I simply don't understand the benefits of having an error in my dev environment that won't show up on prod --probably because of my lack of understanding.</p>
  
  <p>Usually, the fix is easy enough, I just wrap the error causing code in a setTimeout like this:</p>
  
  
  
  <pre class="lang-typescript prettyprint-override"><code>setTimeout(()=&gt; {
      this.isLoading = true;
  }, 0);
  </code></pre>
  
  <p>Or force detect changes with a constructor like this: <code>constructor(private cd: ChangeDetectorRef) {}</code>:</p>
  
  <pre class="lang-typescript prettyprint-override"><code>this.isLoading = true;
  this.cd.detectChanges();
  </code></pre>
  
  <p>But why do I constantly run into this error? I want to understand it so I can avoid these hacky fixes in the future.</p>