One of the common task in many Angular web applications is to pass the value of a drop down (select) input element from the HTML to TS file when the user selects an option. When we do so by using the change event binding and passing the details of the event using $event to the TS file like this,

<select class="form-select" aria-label="Default select example" (change)='getSelectedValue($event)'>
    <option value="">Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

then, if you try to access the value in the ts file like this

getSelectedValue(event: Event) {    
    console.log(event.target.value)
  }

then,first TypeScript may show us the error “Object is possibly ‘null'”. We can solve this by adding a bang operator like this

 getSelectedValue(event: Event) {    
    console.log(event.target!.value)
  }

Now, you may get the “Property ‘value’ does not exist on type ‘EventTarget’” error in your Angular 12/13 application like below

Solution for Property ‘value’ does not exist on type ‘EventTarget’ in Angular 12/ 13 & TypeScript

To solve this problem, we can modify our ts file to tell TypeScript that the Event is caused by an Element whose target is an HTMLInputElement

example:

getSelectedValue(event: Event) {
    console.log((event.target as HTMLInputElement).value);
    //  or by using a generic like this
    // console.log((<HTMLInputElement>event.target).value);
  }