title: Expression has changed after it was checked - Event subscription updates
body: <p>Though I know the reason as to why this <code>ERROR</code> happens, However, I would like to know how to overcome in the following scenario:</p>
  
  <p>I have a generic loader in <code>app.component</code>. For some of the child routes it'll update the loader value on <code>ngOnInit</code> life cycle until records are fetched. Also, I do not want to use <code>resolver</code> as I'm parsing the query params in the component and then passing to the service to fetch the records.</p>
  
  <p>The <code>ERROR</code> is due to the default value of the loader to <code>false</code> and changes to <code>true</code> during the child component life cycle <code>ngOnInit</code> hook.</p>
  
  <p>Please have a look at the following snippet:</p>
  
  <pre><code>// app.component.ts
   viewModel = {
      showLoader: false
  };
  ngOnInit() {
      this.eventService.on(ApplicationEvents.SHOW_FULL_PAGE_LOADER, (value) =&gt; {
          this.viewModel.showLoader = value;
      });
  }
  // app.component.html
  &lt;div class="full-page-loader" *ngIf="viewModel.showLoader"&gt;&lt;em class="fa fa-cog fa-spin loader-icon"&gt;&lt;/em&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And following is the snippet from the lazyloaded child component:</p>
  
  <pre><code>ngOnInit() {
      this.loadData();
      this.cart = this.cartService.getCart();
    }
  
  private loadData() {
  this.eventService.showFullPageLoader(); // &lt;-- This will emit an event to show the loader 
  this.umrahDataService.getServices(UmrahServiceType.Visa).then((resp) =&gt; {
    this.visas = resp.map((v) =&gt; {
      v.image = '/assets/img/umrah/visa-processing.jpg';
      return v;
    });
  
    this.eventService.hideFullPageLoader();
    this.actionInProcess = false;
  }).catch((er) =&gt; {
    this.alertService.alert('SERVER_ERROR');
    this.eventService.hideFullPageLoader();
    this.actionInProcess = false;
  });
  }
  </code></pre>
  
  <blockquote>
    <p>ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'.
        at viewDebugError (core.js:19629)
        at expressionChangedAfterItHasBeenCheckedError (core.js:19617)
        at checkBindingNoChanges (core.js:19833)
        at checkNoChangesNodeInline (core.js:29533)
        at checkNoChangesNode (core.js:29522)
        at debugCheckNoChangesNode (core.js:30126)
        at debugCheckDirectivesFn (core.js:30054)
        at Object.eval [as updateDirectives] (AppComponent.html:3)
        at Object.debugUpdateDirectives [as updateDirectives] (core.js:30043)
        at checkNoChangesView (core.js:29421)</p>
  </blockquote>
  
  <p>Although I tried <code>BehaviorSubject</code> with <code>async</code> pipe as well and that didn't help either.
  Looking forward for the feedbacks.
  Thanks</p>