title: Angular2 Templating: Safe Navigation Operator and *ngIf
body: <p>My goal is to hide an element when no items are available. My template so far:</p>
  
  <pre class="lang-ts prettyprint-override"><code>&lt;div *ngIf="(projects | async)?.userProjects.length !== 0"&gt;
      &lt;div class="sortWrapper"&gt;
          &lt;h3&gt;Your projects&lt;/h3&gt;
      &lt;/div&gt;
  
      &lt;div class="listElementWrapper"&gt;
          &lt;div class="listElement" *ngFor="let userProject of (projects| async)?.userProjects" (click)="redirectToProject(project)"&gt;
              &lt;h4&gt;{{ userProject.ProjectName }}&lt;/h4&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The *ngFor with the safe navigation operator works as expected. The first line (*ngIf) doesn't though. As the <code>userProjects</code> property is async, the length somehow doesn't update. Did I miss a key concept here?</p>
  
  <p>Component: <code>private projects: Observable&lt;any[]&gt;;</code></p>