Динамические вкладки Ngb Bootstrap Angular 7 с фильтром данных

Question

Я использую угловой вариант 7 и использую угловой загрузчик ngb для вкладки

здесь отображаются данные

Данные показывают все элементы.Как отображать динамические данные, как показано ниже

Для кода

getContents() {
    this.isLoading = true;
    this.HomeData.getContents({ data: this.contents })
    .pipe(
      finalize(() => {
        this.isLoading = false;
      })
    )
    .subscribe((data: any) => {
      this.contents = data;
      console.log('contents', this.contents);
    });
  }

И для HTML

<ngb-tabset>
  <ngb-tab *ngFor="let data of contents">
    <ng-template ngbTabTitle>
      <div class="tab-home">
        <i class="fas fa-smile"></i>
        <span>{{data.modality}}</span>
      </div>
    </ng-template>
    <ng-template ngbTabContent>
      <div class="row">
        <div class="col-md-4" *ngIf="data.contentCategoryId === item.id; else no_data">
          <div class="card">
            <img class="card-img" src="{{data.contentImg}}" alt="{{data.description}}" />
            <div class="card-body">
              <div class="card-desc">
                <h5 class="card-title">{{data.description}}</h5>
              </div>
            </div>
          </div>
        </div>
        <ng-template #no_data>
          <div class="col-md-12">
            <div class="no-data home">No Data</div>
          </div>
        </ng-template>
      </div>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

Большое спасибо