title: ngrx action triggering ExpressionChangedAfterItHasBeenCheckedError exception
body: <p>I'm starting an Angular application that uses ngrx for its state management and I've come across a problem that has puzzled me a bit:</p>
  <p>One of the UI actions is to block the screen with a loader, and there is another one to unblock it:</p>
  <pre class="lang-js prettyprint-override"><code>import { createAction } from &quot;@ngrx/store&quot;;
  
  export const blockUI = createAction(&quot;[UI] Block UI&quot;);
  
  export const unblockUI = createAction(&quot;[UI] Unblock UI&quot;);
  </code></pre>
  <p>The associated reducer only triggers a flag between <code>true</code> or <code>false</code> depending on the action:</p>
  <pre class="lang-js prettyprint-override"><code>export const uiReducer = createReducer&lt;UiState&gt;(initialState,
    ...
  
    on(blockUI, (state) =&gt; ({ ...state, blockUi: true })),
  
    on(unblockUI, (state) =&gt; ({ ...state, blockUi: false })),
  
    ...
  
  </code></pre>
  <p>I subscribe to this state flag in the main app's component to show/hide the UI blocker:</p>
  <pre class="lang-js prettyprint-override"><code>  this.store.pipe(
      select((state) =&gt; state.ui.blockUi),
      distinctUntilChanged()
    ).subscribe(
      (blockUi) =&gt; {
        console.log(&quot;Block UI: &quot;, blockUi);
        this.loading = blockUi;
      }
    );
  </code></pre>
  <p>I'm using the <code>distinctUntilChanged</code> rxjs operator to discard equal flag values because the block/unblock action can be dispatched from several components at the same time:</p>
  <p><a href="https://i.stack.imgur.com/UhkZd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UhkZd.png" alt="UI actions" /></a></p>
  <p>This is the component in the HTML template that blocks the UI (I use PrimeNG <a href="https://www.primefaces.org/primeng/v8.2.9-lts/#/blockui" rel="nofollow noreferrer">BlockUI</a>):</p>
  <pre class="lang-html prettyprint-override"><code>  &lt;!-- Component to block/unblock the UI --&gt;
    &lt;p-blockUI [blocked]=&quot;loading&quot;&gt;
      &lt;div class=&quot;divCenterHV&quot;&gt;
        &lt;p-progressSpinner&gt;&lt;/p-progressSpinner&gt;    
      &lt;/div&gt;
    &lt;/p-blockUI&gt;
  </code></pre>
  <p>In my opinion, everything should work fine, but when I run the app I get the following error:</p>
  <p><a href="https://i.stack.imgur.com/G4YF6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G4YF6.png" alt="Exception" /></a></p>
  <p>I can solve it easily adding a <code>delay(1)</code> rxjs operator to the state subscription, but I'd like to know why the exception is fired, as I can't find the reason...</p>
  <p>Many thanks!</p>