Filter of a table doesn't work. Angular Material

Question

I am building a filter for a table, this is the code of the component.ts:

filterValue: string = '';
dataSour = new MatTableDataSource(this.dataSource)
  applyFilter (){
    
    this.dataSour.filter = this.filterValue.trim().toLowerCase();
    console.log(this.filterValue);
  }

dataSource is the array of objects that has the information that is loaded to the table. This is the html:

<mat-form-field (ngSubmit)="applyFilter()">
    <input class="form-control" name="filterValue" [(ngModel)]="filterValue" matInput matNativeControl placeholder="Filter">
</mat-form-field>




<div class="row">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">



        <!-- Position Column -->
        <ng-container *ngIf="dataSource.length > 0" matColumnDef="a">
            <th mat-header-cell *matHeaderCellDef> Columna 1 </th>
            <td mat-cell *matCellDef="let dataobj"> {{dataobj.a}} </td>
        </ng-container>

        <!-- Name Column -->
        <ng-container *ngIf="dataSource.length > 0" matColumnDef="b">
            <th mat-header-cell *matHeaderCellDef> Columna 2 </th>
            <td mat-cell *matCellDef="let dataobj"> {{dataobj.b}} </td>
        </ng-container>

        <!-- Weight Column -->
        <ng-container *ngIf="dataSource.length > 0" matColumnDef="c">
            <th mat-header-cell *matHeaderCellDef> Columna 3 </th>
            <td mat-cell *matCellDef="let dataobj"> {{dataobj.c}} </td>
        </ng-container>

        <!-- Symbol Column -->
        <ng-container *ngIf="dataSource.length > 0" matColumnDef="d">
            <th mat-header-cell *matHeaderCellDef> Columna 4 </th>
            <td mat-cell *matCellDef="let dataobj"> {{dataobj.d}} </td>
        </ng-container>

        <ng-container *ngIf="dataSource.length > 0" matColumnDef="e">
            <th mat-header-cell *matHeaderCellDef> Columna 5 </th>
            <td mat-cell *matCellDef="let dataobj"> {{dataobj.e}} </td>
        </ng-container>

        <ng-container *ngIf="dataSource.length > 0" matColumnDef="f">
            <th mat-header-cell *matHeaderCellDef> Columna 6 </th>
            <td mat-cell *matCellDef="let dataobj"> {{dataobj.f}} </td>
        </ng-container>

        <ng-container *ngIf="dataSource.length > 0" matColumnDef="g">
            <th mat-header-cell *matHeaderCellDef> Columna 7 </th>
            <td mat-cell *matCellDef="let dataobj"> {{dataobj.g}} </td>
        </ng-container>

        <div *ngIf="dataSource.length > 0">
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </div>

    </table>
</div>

I am not getting any errors, but the filter doesn't work, the input catch the information, but the filter does anything with it. I hope you can help me.

Answer 1

I think, I have found a solution for you. There are some small mistakes are found like you are trying to call applyFilter on ngSubmit in mat-form-field . The apply filter should in the <intput> tag. So your code should look like below=>
HTML:

<mat-form-field >
    <input class="form-control" name="filterValue"
          (ngModelChange)="applyFilter($event)" 
          [(ngModel)]="filterValue" matInput matNativeControl 
          placeholder="Filter">
</mat-form-field>

TS:

applyFilter(fV: string) {
    this.dataSource.filter = fV.trim().toLowerCase();
}

Note: Check the Demo Link Stackblitz Demo .