title: Using *ngIf to read out an array on its content?
body: <p>I've build a dynamic list via ng-container and div-containers so that when the value of an object is &quot;-&quot; it is not shown at all. Now I want to create a heading that disappears if all values of the array are &quot;-&quot; as well. Is there a way to create this? Because using the indexOf function does not accomplish that goal or I did something wrong using:</p>
  <pre><code>&lt;div *ngIf=&quot;dataSource.Value.indexOf('-') != -1&quot;&gt;TABLE&lt;/div&gt;
  </code></pre>
  <p>HTML:</p>
  <pre><code>    &lt;div&gt;TABLE&lt;/div&gt;
      &lt;br&gt;
      &lt;div class=&quot;content&quot;&gt;
        &lt;ng-container *ngFor=&quot;let item of dataSource&quot;&gt;
          &lt;div *ngIf=&quot;item.Value != '-'&quot; class=&quot;data-item&quot;&gt;
            &lt;div&gt;{{ item.Header }}&lt;/div&gt;
            &lt;div&gt;{{ item.Value }}&lt;/div&gt;
          &lt;/div&gt;
        &lt;/ng-container&gt;
      &lt;/div&gt;
      &lt;br /&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>      .content {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        }
        .data-item{
        flex: 0 0 21%;
      
        }
  </code></pre>
  <p>TS:</p>
  <pre><code>    import { Component, VERSION } from '@angular/core';
  
      @Component({
        selector: 'my-app',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css'],
      })
      export class AppComponent {
        name = 'Angular ' + VERSION.major;
  
        dataSource: items[] = [
          { Header: 'Header A1', Value: 123 },
          { Header: 'Header B2', Value: 234 },
          { Header: 'Header C3', Value: '-' },
          { Header: 'Header D4', Value: 456 },
          { Header: 'Header E5', Value: '-' },
          { Header: 'Header F6', Value: 678 },
          { Header: 'Header G7', Value: 789 },
          { Header: 'Header G8', Value: 890 },
          { Header: 'Header G9', Value: 901 },
        ];
      }
  
      export interface items {
        Header: string;
        Value: any;
      }
  </code></pre>
  <p>Also here is a link to my stackblitz project: <a href="https://stackblitz.com/edit/angular-ivy-his9sv?file=src/app/app.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-his9sv?file=src/app/app.component.html</a></p>