PrimeNG Table filterGlobal TS2339: Property 'value' does not exist on type 'EventTarget'

Viewed 7122

All of the examples I have found for the PrimeNG p-table show the following example for filtering a table.

<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Filter" />

When I use this I get a compile error.

error TS2339: Property 'value' does not exist on type 'EventTarget'.

Note: I do have strict mode turned on.

7 Answers

try to parse the target to an HTMLInputElement first:

<input pInputText type="text" (input)="applyFilterGlobal($event, 'contains')" placeholder="Filter" />

and in your component:

applyFilterGlobal($event, stringVal) {
  this.dt.filterGlobal(($event.target as HTMLInputElement).value, stringVal);
}

event.target is an HTMLElement, because you are in strict mode, and HTMLElement doesnt have the value property, the compile engine throws the error, changing the target to HTMLInputElement solves it

Your HTML input should be like this

<input pInputText type="text" (input)="applyFilterGlobal($event, 'contains')" placeholder="Filter" />

and in your TS do this

import { Table } from 'primeng/table'
...
applyFilterGlobal($event: any, stringVal: any) {
    this.dt!.filterGlobal(($event.target as HTMLInputElement).value, stringVal);
  }

if you get error for dt add below line

  @ViewChild('dt') dt: Table | undefined;
<input pInputText #textInput type="text(input)="tt.filterGlobal(textInput.value, 'contains')" placeholder="Filter" />

Adding #textInput to the tag worked for me.

  1. write a function in component to retrieve the value of $event by passing the $event
getEventValue($event:any) :string {
  return $event.target.value;
} 
  1. apply the above function in your HTML code.
 <input pInputText type="text" (input)="dt1.filterGlobal(getEventValue($event), 'contains')" placeholder="Search keyword" />

Another option is to use an Angular Template Reference in the input tag.

<input pInputText #textInput type="text(input)="dt.filterGlobal(textInput.value, 'contains')" placeholder="Filter" />

#textInput above is a reference to an input tag so it has a value attribute.

Globally tell Angular not to check the type of DOM event bindings by disabling strictDomEventTypes:

{
  "angularCompilerOptions": {
    "strictTemplates": true
    "strictDomEventTypes": false,
  }
}

Extending the previous answers, this worked for me:

<input pInputText type="text" (input)="applyFilterGlobal($event, 'contains', table)" placeholder="Search keyword" />

where table is your #table reference in the table like <p-table #table ...>. Then:

applyFilterGlobal($event: any, stringVal: any, dt: any) {
   dt!.filterGlobal(($event.target as HTMLInputElement).value, 'contains');
}
Related