title: Why is the async [hidden] property not updating in this template?
body: <p>In a todo app, each plan <code>item</code> has an observable property on it called <code>task</code>. The task then has a property called <code>.done</code>. The item is hidden when <code>.done=false</code>.</p>
  <p>However, in the following template, <code>[hidden]</code> is not <em>initially</em> taking the value assigned to it of <code>(itemComponent.task | async)?.done</code>:</p>
  <pre><code>&lt;div *ngFor=&quot;let item of allItems$ | async&quot;&gt;
    &lt;app-item [item]=&quot;item&quot; #itemComponent [hidden]=&quot;(itemComponent.task | async)?.done&quot;&gt;
    &lt;/app-item&gt;
  &lt;/div&gt;
  </code></pre>
  <h3>The value of <code>task.done</code> doesn't initially propagate into <code>[hidden]</code></h3>
  <p>I want the task to be hidden when the item is done however the hidden status isn't updating. <em><strong>At least it's not doing it initially</strong></em>. It does do it when something triggers an Angular (11) update cycle.</p>
  <h3><code>task.done</code> is definitely set</h3>
  <p>The obvious question is whether the item is correctly emitting a <code>task</code>. So I added the following line immediately under the <code>app-item</code> and inside the <code>*ngFor</code> loop:</p>
  <pre><code>&lt;!-- test to see if task object is being emitted --&gt; 
  &lt;span&gt;{{(itemComponent.task | async)?.done}}&lt;/span&gt;
  </code></pre>
  <p>This correctly prints the value of <code>item.task.done</code> from the first moment the page is loaded. But even though the value of <code>done</code> is as expected, it's not causing <code>[hidden]</code> to hide the elemnet. Why might that be?</p>