title: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked - How to update template after Observable Value change
body: <p>I went through quite a lot of SO posts trying to find a solution to this one, the only one I found had a hack implementation. I have an observable taken from the ngrx store which I subscribe too:</p>
  
  <pre><code>this.navigationSelected$ = this.store.pipe(select(currentlySelectedNavigation));
  
  this.navigationSelected$.subscribe(res =&gt; {
    ...
  });
  </code></pre>
  
  <p>with an ngIf depending on this observable value inside of the template:</p>
  
  <pre><code>&lt;profile-navigation *ngIf="(navigationSelected$ | async) == navigationLayout[0].location"&gt;&lt;/profile-navigation&gt;
  </code></pre>
  
  <p>Whenever the value of navigationSelected$ changes, this throws:</p>
  
  <pre><code>ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: [object Object]'. Current value: 'ngIf: false'.
  </code></pre>
  
  <p>and the template does not update. I managed to go around it by running cdRef.detectChanges(); at the end of the subscription. It works fine but the error is still being thrown, plus as mentioned, it seems like a hack. </p>
  
  <p>What would be the best way of achieving what I am trying to do?</p>