фильтр не работает с использованием угловых материалов

Question

мой фильтр в моем проекте не работает, я не знаю, почему, используя угловые материалы, когда я пытаюсь найти что-то, не работает мой фильтр, что я делаю не с теми людьми, если у вас есть идея другое решение длямоя проблема пост, пожалуйста, или, если вы можете помочь мне, пожалуйста,

это мой код в компоненте HTML

 <section  style="margin-left: 2%" class="row mt-5">
  <mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>

  <table ([dataSource])="dataSource" class="table table-hover">

      <thead>
        <tr>
          <th scope="col">Nombre</th>
          <th scope="col">Categoría</th>
        <th scope="col">Fecha</th>
          <th scope="col">Acciones</th>
        <th scope="col">&nbsp;</th>   
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let examenes of examenes">

         <td>{{examenes.nombreExa}}</td> 
         <td>{{examenes.categoriaExa}}</td> 
             <td>{{examenes.fechaExa}}</td>
        <td >
          <button class="btn btn-danger" (click)="delete(examenes)">Borrar</button>

         <button class="btn btn-secondary" (click)="delete(examenes)">Editar</button>
              <button class="btn btn-primary" (click)="examenClicked(examenes)">Detalle</button>
        </td>
           <td >

        </td>  
           <td >

        </td>      
          </tr>
      </tbody>
            <div class="pad" *ngIf="examenes?.length === 0" layout="row" layout-align="center">
                <h3> No hay examenes para mostrar </h3>
            </div>
    </table>

    </section>

мой код в компоненте TS

import { Component, OnInit } from '@angular/core';
import { Examen } from '../../dataservice/examen';
import { dataService } from '../../dataservice/data.service';
import {MatTableDataSource} from '@angular/material/table';
@Component({
  selector: 'app-examenes',
  templateUrl: './examenes.component.html',
  styleUrls: ['./examenes.component.css']
})
export class ExamenesComponent implements OnInit {
  selectedExamen;
  examenes: Examen[];
  dataSource = new MatTableDataSource(this.examenes);
  constructor(private dataService: dataService) { 
    this.getExamenes();
    this.selectedExamen = {id: -1, nombreExa: '' , descripcionExa: '',  release_date:'', fechaExa: '', categoriaExa:'' };
   }
  getExamenes(): void {
    this.dataService
      .getExamenes()
      .then(examenes => this.examenes = examenes);
  }
  delete(exa): void {
    this.dataService.deleteExamenes(exa.id);
    this.examenes = this.examenes.filter(e => e !== exa);
  }

  examenClicked = (exa) => {
    this.dataService.getOneExamen(exa.id).subscribe(
      data => {
        console.log( this.selectedExamen = data);
      },
      error => {
        console.log(error);
      }
    );
  }
  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  ngOnInit() {
    this.getExamenes();
  }
}