title: Angular2: *ngFor, AsyncPipe, and index
body: <p>In a previous question <a href="https://stackoverflow.com/questions/30097198/how-to-show-date-once-per-day-from-an-array-with-multiple-timestamps">here</a>, I am trying to show a date only when it has changed between 2 messages. </p>
  
  <p>The difference is that I am now connected to a realtime database (Firebase), so I subscribe to the data source and pass it through the async pipe before going through index and *ngIf:</p>
  
  <pre><code>&lt;div *ngFor='let message of (chat | async) ; let i = index'&gt;
      &lt;button *ngIf="i == 0 || (message.timestamp | date: 'ddMMMMyyyy') != ((chat | async)[i-1].timestamp | date: 'ddMMMMyyyy')"&gt;
          {{ message.timestamp | date:'ddMMM' }}
      &lt;/button&gt;
      ...
      &lt;!--More html elements below (omitted)--&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>This works well when I first load the view, however, if I push a new entry into <code>chat</code>, I get the following error:</p>
  
  <p><code>TypeError: Cannot read property '0' of null</code></p>
  
  <p>Maybe I am not too sure how the async pipe works, but when I try returning <code>{{ (chat | async).length }}</code>, it works as intended. Any suggestions on a workaround/proper practice?</p>