title: Angular OnPush not updating template
body: <p>I have two components, both of which are set to <code>OnPush</code>. The parent component sets <code>accountLoading</code> to true once <code>getAccount()</code> is called, then sets <code>accountLoading</code> to false once the call is completed. As expected, the console outputs:</p>
  
  <blockquote>
    <p>this.accountLoading true</p>
  </blockquote>
  
  <p>followed by:</p>
  
  <blockquote>
    <p>this.accountLoading false</p>
  </blockquote>
  
  <p>Yet the template doesn't update, and is stuck thinking that <code>accountLoading</code> is true. How do I get the template to update as expected when the value changes? I'd like to keep the change detection as OnPush.</p>
  
  <p><strong>Parent component:</strong></p>
  
  <p>TypeScript:</p>
  
  <pre><code>public accountLoading: boolean;
  ...
  
  getAccount() {
    this.accountLoading = true;
      this.authStore
          .pipe(select(fromAuthStore.getAccountData))
          .subscribe(account =&gt; {
            if (account) {
              this.accountLoading = false;
            }
            console.log('this.accountLoading', this.accountLoading);
          });
  
    // Loading account if it hasn't yet been loaded
    this.authService.getAccount();
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;child-component
    [accountLoading]="accountLoading"&gt;
  &lt;/child-component&gt;
  </code></pre>
  
  <p><strong>Child component</strong>:</p>
  
  <p>TypeScript:</p>
  
  <pre><code>@Input() accountLoading: boolean;
  ...
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p *ngIf="accountLoading"&gt;
    Loading...
  &lt;/p&gt;
  </code></pre>