title: Facing "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked" to show/hide loader
body: <p>I have a common loader along with <code>router-outlet</code> (to load child components) in parent component (AppComponent). In child component, we change value to show and hide the loader before and after calling an API respectively. Hence this error occurs.</p>
  <p>for example this is my loader in <code>app.cpmponent.html</code>:</p>
  <pre><code>&lt;p [ngClass]=&quot;(overlappingProgress | async) ? 'display-block' : 'display-none'&quot;&gt;holaaaaaaaaaaaaaaa&lt;/p&gt;
  </code></pre>
  <p>here <code>overlappingProgress</code> is a <code>observable</code> type of variable that is resolved through <code>async</code> pipe.</p>
  <p>In child component, I have a form that needs some data from server. so, inside <code>ngOnInit</code> of child component I dispatched some actions(as we are using <code>ngrx</code>) in the following sequence -</p>
  <ol>
  <li>showOverlappingProgress() // it makes loading property true in reducer</li>
  <li>GetData()</li>
  <li>hideOverlappingProgress() // it makes loading property false in reducer</li>
  </ol>
  <p>so, in <code>app.component.ts</code> to detect that change, I listen the changes to update show/hide the loader.</p>
  <pre><code>this.overlappingProgress = this.store.select(s =&gt; s.app.overlappingProgress);
  </code></pre>
  <p>I have some idea that it compares the previous/old value with the value of 1st digest cycle, but the value is changing inside the digest cycle so, while it runs second digest cycle, the value mismatch and thus this error occurs.</p>
  <p>I mimic this scenario with a simpler version in <a href="https://stackblitz.com/edit/angular-cdkzwy" rel="nofollow noreferrer">stackblitz</a>.</p>
  <p>I found some solution that suggested to use <code>setTimeout()</code> or <code>this.cdr.detectChanges()</code>.</p>
  <p>I personally don't feel <code>setTimeout()</code> is ok. Besides, trigger <code>detectchanges</code> manually may do a lot of extra work as all the child components are suing this loader and every time it will trigger and extra change detection.</p>
  <p>So, here I am to get some suggestion on what should be best solution in this scenario.</p>