CODEWITHSUNDEEP
angularangular-material
schuhesindbequemer
schuhesindbequemer

Reputation: 263

Angular Material Filter Table

I am trying to add a Filter option for my Material Table in Angular, but I am getting these two errors, which specify on 'value':

Object is possibly 'null'.
Property 'value' does not exist on type 'EventTarget'.

Here is my .html file:

<mat-form-field>
    <input (keyup)="applyFilter($event.target.value)" matInput placeholder="Filter">
</mat-form-field>

And the .ts file:

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

What am I doing wrong/ What should I be doing different?

Upvotes: 0

Views: 1496

Answers (1)

Yong Shun
Yong Shun

Reputation: 51160

Solution 1:

Add id (#filter) to input and retrieve value with filter.value

<input matInput #filter (keyup)="applyFilter(filter.value)" placeholder="Filter">

Solution 2:

Add another function to handle event and parse value to applyFilter.

.component.ts

fireFilterEvent(event: Event) {
  const input = (event.target as HTMLInputElement).value;
  this.applyFilter(input);
}

For your input element, you call fireFilterEvent($event) on (keyup) event.

.component.html

<input matInput (keyup)="fireFilterEvent($event)" placeholder="Filter">

Upvotes: 1

Related Questions