Как отфильтровать список заголовков по нескольким буквам во внешнем поле ввода после выбора заголовка столбца из внешнего выпадающего списка в Angular 7?

Question

Я новичок в Angular 7. Итак, у меня есть ngx-datatable с различными заголовками. У меня есть выпадающий список поверх таблицы данных, который является внешним по отношению к таблице данных, в которой перечислены несколько заголовков столбцов. После того, как я выберу раскрывающийся список, я хочу, чтобы мое внешнее окно поиска (поле ввода) отфильтровывало выбранный столбец заголовка по нескольким буквам, сужая тем самым список доступных элементов. Объединить ли мои методы, где я добавляю заголовки столбцов, чтобы включить фильтрацию списка доступных строк? И я использую сортировку, чтобы сузить список? Где я могу разместить свой метод фильтра в HTML, чтобы отфильтровать список?

.html

  <div><input class="searchBox" placeholder="Search"/>
</div> 

<div ngbDropdown class="d-inline-block">
  <button class="btn btn-light filter-button" id="input1" ngbDropdownToggle>Select an option</button>
  <div ngbDropdownMenu aria-labelledby="inputmethod">
    <button ngbDropdownItem *ngFor="let column of columns" (click)="sort(column.prop)">
      {{ column.prop }}
    </button>
  </div>
</div>`

<ngx-datatable class="expandable"
                 [rows]="rows"
                 [columns]="columns"
                 [headerHeight]="40"
                 [rowHeight]="'auto'"
                 [columnMode]="'force'" [limit]="20" [footerHeight]="50">
    <ngx-datatable-column name="Header">
      <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
        <span class="custom-cell"><a (click)="method(content, id, false)">{{value}}</a></span>
      </ng-template>
    </ngx-datatable-column>

.ts

 sort(prop) {
    this.rows.sort((a, b) => a[prop].localeCompare(b[prop], 'en', { numeric: true }));
    this.rows = [...this.rows]; }
filterColumn(name, filterBy){
const titleRows = Object.assign(this.titleList);
this.headerSelectedValue = name;
this.rows = titleRows.filter(row => {
if (filterBy === 'Case'){
return row.title_type_name === this.headerSelectedValue;
}

При нажатии на выпадающее окно я выбираю заголовок столбца. Я иду в окно поиска и фильтрую список элементов несколькими буквами, уменьшая количество доступных элементов.