title: Odd change detection behavior Angular 2+
body: <p>I am working on a big application and I am having some issues with change detection.</p>
  <p><strong>Parent Component ts:</strong></p>
  <p>Using <code>changeDetection: ChangeDetectionStrategy.OnPush</code></p>
  <p>I have a variable that is an observable</p>
  <p><code>loaderOverlay$: Observable&lt;boolean&gt;;</code></p>
  <pre><code>this.loaderOverlay$ = this.store.pipe(
    select(selectors.loaderOverlaySelector)
  );
  </code></pre>
  <p>This variable gets updated from an rxjs action from a child component. Then goes through the rxjs process. (Action -&gt; Reducer -&gt; Selector)</p>
  <p><strong>Parent Component HTML</strong></p>
  <p><code>&lt;div *ngif=&quot;(loaderOverlay$ | async)&quot;&gt;&lt;/div&gt;</code></p>
  <p>Child #1 Component (where im dispatching my action):</p>
  <pre><code>myFunction() {
    this.store.dispatch(new actions.LoaderOverlay(true));
  }
  </code></pre>
  <hr />
  <p>My issue is that once I dispatch the action, the <code>*ngif</code> is very shaky. It doesn't seem to work the way I want it to (dispatch the action, change the value to true so the div appears). It's very strange because if I <code>console.log(action.payload)</code> in the reducer, the value is actually being updated, but the <code>*ngif</code> isn't working. And what's even stranger is when I hover over some other component, it seems to kick in.</p>
  <p>I think I've narrowed it down to change detection because in the parent component if I do:</p>
  <pre><code>ngAfterViewChecked(){
     this.changeDetector.detectChanges();
  }
  </code></pre>
  <p>It seems to work for me. My issue with this is that <code>ngAfterViewChecked</code> seems to get triggered a massive amount of times and I'm afraid of performance issues.</p>
  <p>What might be going on here, and what I can do to fix this strange issue?</p>