Using *ngIf to read out an array on its content?

Issue

I've build a dynamic list via ng-container and div-containers so that when the value of an object is "-" it is not shown at all. Now I want to create a heading that disappears if all values of the array are "-" 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:

<div *ngIf="dataSource.Value.indexOf('-') != -1">TABLE</div>

HTML:

    <div>TABLE</div>
    <br>
    <div class="content">
      <ng-container *ngFor="let item of dataSource">
        <div *ngIf="item.Value != '-'" class="data-item">
          <div>{{ item.Header }}</div>
          <div>{{ item.Value }}</div>
        </div>
      </ng-container>
    </div>
    <br />

CSS:

      .content {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      }
      .data-item{
      flex: 0 0 21%;
    
      }

TS:

    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;
    }

Also here is a link to my stackblitz project: https://stackblitz.com/edit/angular-ivy-his9sv?file=src/app/app.component.html

Solution

I would suggest to add a boolean property to the class along the lines:

export class AppComponent {
  allEmpty: boolean = false;

  dataSource: items[] = ...

  constructor() {
    // If you fetch data via http etc. assign this in subscribe or pipe(tap(...)) (when using async-pipe)
    this.allEmpty = this.dataSource.every((x) => x.Value === '-');
  }
}

<div *ngIf="!allEmpty">
  table is here
</div>

Answered By - Gunnar B.