title: How to hide element in *ngFor when specific value has been iterated over
body: <p>What is the proper way in Angular to not show an element in a <code>*ngFor</code> when a specific value has been iterated over? I tried it with putting it a new array and compare it but, it's complicated when the ngFor loops again all of the sudden.</p>
  
  <p><strong>// method</strong></p>
  
  
  
  <pre class="lang-ts prettyprint-override"><code>checkDateHeader(date) {
     if (this.dateHeaders.indexOf(date) &gt; -1) {
         return false;
     } else {
         this.dateHeaders.push(date);
         console.log(this.dateHeaders);
         return true;
     }
  }
  </code></pre>
  
  <p><strong>//template</strong>    </p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;section *ngFor="let key of todoBacklog | OrderByDate;"&gt;
     &lt;ion-list-header *ngIf="checkDateHeader(key.putInbacklogDate | date:'yMMMMEEEEd')"&gt;
        {{key.putInbacklogDate | date:'yMMMMEEEEd'}}
     &lt;/ion-list-header&gt;
     &lt;ion-card&gt;
         &lt;ion-item&gt;
             &lt;button ion-button icon-left clear item-right&gt;
               &lt;ion-icon name="md-more"&gt;&lt;/ion-icon&gt;
             &lt;/button&gt;
         &lt;/ion-item&gt;
         &lt;ion-card-content&gt;
             &lt;ion-card-title&gt;
                {{key.title}}
             &lt;/ion-card-title&gt;
         &lt;/ion-card-content&gt;
     &lt;/ion-card&gt;
  &lt;/section&gt;
  </code></pre>