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

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.

angular primeng

Solution 1:^[1]

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;

Solution 2:^[2]

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

Adding #textInput to the tag worked for me.

Solution 3:^[3]

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

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

Solution 4:^[4]

write a function in component to retrieve the value of $event by passing the $event

getEventValue($event:any) :string {
  return $event.target.value;
}

apply the above function in your HTML code.

 <input pInputText type="text" (input)="dt1.filterGlobal(getEventValue($event), 'contains')" placeholder="Search keyword" />

Solution 5:^[5]

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.

Solution 6:^[6]

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');
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Alexis
Solution 2	jmoerdyk
Solution 3	Josef
Solution 4
Solution 5	The Jeff
Solution 6	Digao

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]