mat-table filter working only on the first character

Question

Hello

I’m having a problem configuring a search filter in the mat-table (angular 2.x).

The table is being populated through a request as per:

getAllLabs() {
    this.param = this.route.snapshot.params['param'];
    this.service.getAllResults().subscribe(res => {
      this.listResults = new MatTableDataSource(res[this.param]);
    })
  }

The search filter is called directly in the input:

 <mat-form-field fxLayout="row" class="formSearch" appearance="outline">
   <mat-icon matPrefix>search</mat-icon>
   <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Pesquisar...">
 </mat-form-field>

 applyFilter(filterValue: string) {
    this.listResults.filter = filterValue.trim().toLowerCase();
  }

Return, both listResults and filterValue are all ok, but the filter only works with the first letter typed in the search input.

For example: ListResults is an array of cities and is populated as follows:

 ['São Paulo', 'São Carlos', 'Rio de Janeiro']

Example 1: When typing the letter’S' the filter searches the cities of São Paulo and São Carlos, however, when typing "Sã" (or "Sa") it does not return any filter, as if there was no match;

Example 2: When typing the letter "R" the filter returns to the city of Rio de Janeiro, but when typing the next letter (i), the filter does not match.

That is, from the second character typed, the mat-table filter does not find results.

There is no error in the console or in the returns of variables. What could I be doing wrong? Any suggestions?

---

EDIT

Follow video behavior to better explain.

https://drive.google.com/file/d/15yhewRby9ipLMiiAJmrSsc4FpBRRbIBp/view?usp=sharing

Answer 1

You can use two-way data Binding in its input and apply the filter using the variable, thus:

<input matInput name="search" [(ngModel)]="term" (keyup)="applyFilter()" placeholder="Pesquisar...">

term: string = "";

applyFilter()
{
    this.listResults.filter = this.term.trim().toLowerCase();
    console.log(this.listResults.filteredData);
}

---

EDIT:

A gif to illustrate the filter of this answer: