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

Question

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.

Answer 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;

Answer 2

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

Answer 3

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

Adding #textInput to the tag worked for me.

Answer 4

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

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

2. apply the above function in your HTML code.

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