Реализация фильтрации флажков для мат-карт

Question

Я пытаюсь реализовать систему фильтров для списка объектов деревенских жителей, используя флажки. Сельские жители отображаются с использованием списка мат-сетка, плитки мат-сетка и мат-карт.

Вот это HTML:

<mat-grid-list [cols]="breakpoint" rowHeight="4:5" (window:resize)="onResize($event)">
      <mat-grid-tile *ngFor="let villager of pagedList">
        <mat-card class="clickable" routerLink="/detail/{{villager.id}}">
          <mat-card-header>
            <div mat-card-avatar class="example-header-image"></div>
            <mat-card-title>{{villager.name}}</mat-card-title>
            <mat-card-subtitle>"{{villager.quote}}"</mat-card-subtitle>
          </mat-card-header>
          <img src="{{villager.imageUrl}}" height="150" title="{{villager.name}}">
          <mat-card-actions>
          </mat-card-actions>
        </mat-card>
      </mat-grid-tile>
    </mat-grid-list>

А вот машинопись :

dataSource: MatTableDataSource<any>;
  filterCheckboxes: BehaviorSubject<string[]> = new BehaviorSubject<string[]>([]);

  villagers: Villager[];
  isLoading = false;

  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  pagedList: Villager[] = [];
  breakpoint = 5;  // to adjust to screen
  // MatPaginator Inputs
  length = 0;
  pageSize = 15;  // displaying three cards each row
  pageSizeOptions: number[] = [15, 20, 50];
  pageEvent: any;

ngOnInit() {
    this.getVillagers();
  }

  getVillagers(): void {
    this.isLoading = true;
    this.villagerService.getVillagers().subscribe(villagers => {
      this.villagers = villagers;
      this.isLoading = false;
      this.dataSource = new MatTableDataSource(this.villagers);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
      this.pagedList = this.villagers.slice(0, 15);
      this.length = this.villagers.length;
      this.dataSource.filterPredicate = (data: Villager, filter: string) => {
        return filter.split(',').every((item: string) => data.species.indexOf(item) !== -1);
      };
      this.filterCheckboxes.subscribe((newFilterValue: string[]) => {
        this.dataSource.filter = newFilterValue.join(',');
      });
    });

addFilter(change: MatCheckboxChange) {
    if (this.filterCheckboxes.value.some((a: string) => a === change.source.value)) {
      this.filterCheckboxes.next(this.filterCheckboxes.value.filter((a: string) => a !== change.source.value));
    } else {
      this.filterCheckboxes.next(this.filterCheckboxes.value.concat(change.source.value));
    }
  }

Я хотел бы установить флажок и отображать только жителей деревни, которые соответствуют хотя бы одному из фильтров. Мне удалось настроить фильтрацию на работу с использованием таблицы, но я не хочу отображать информацию. Спасибо.