I'm using the Lateset version of Angluar and I get this error Property 'value' does not exist on type 'EventTarget'

Question

So when I used the $event with the onkeyup event and I want the value of the input filed to pass it to the filter Function it doesn't work

<div class="container mx-auto p-5">
  <div class="searchBar">
    <div class="field">
      <p class="control has-icons-left">
        <input #filterInput class="input" type="text" (keyup)="filterNotes($event.target.value)" placeholder="Filter">
        <span class="icon is-small is-left">
          <i class="fas fa-search"></i>
        </span>
      </p>
    </div>
  </div>
</div>

the class componet :

filterNotes(query: string) {
    // some logic
}

Answer 1

simply add to the

"angularCompilerOptions":{
    "strictDomEventtypes":false
}

in your tsconfig.json file

Answer 2

In this context I think $event.target is not typed so typescript does not know what type of target it is, try the code below:

in the .html file pass only the event:

...
<input (keyup)="filterNotes($event)">
...

in the .ts file modify your method to receive an event:

filterNotes(event: Event): string {
  const { value } = event.target as HTMLInputElement // forcing the type
  // the rest of yout logic goes here
}