Property ‘value’ does not exist on type ‘EventTarget’

by

You need to explicitly tell TypeScript the type of the HTMLElement which is your target.

The way to do it is using a generic type to cast it to a proper type:

this.countUpdate.emit((<HTMLTextAreaElement>e.target).value./*...*/)

or (as you like)

this.countUpdate.emit((e.target as HTMLTextAreaElement).value./*...*/)

or (again, matter of preference)

const target = e.target as HTMLTextAreaElement;

this.countUpdate.emit(target.value./*...*/)

This will let TypeScript know that the element is a textarea and it will know of the value property.

The same could be done with any kind of HTML element, whenever you give TypeScript a bit more information about their types it pays you back with proper hints and of course less errors.

To make it easier for the future you might want to directly define an event with the type of its target:

// create a new type HTMLElementEvent that has a target of type you pass
// type T must be a HTMLElement (e.g. HTMLTextAreaElement extends HTMLElement)
type HTMLElementEvent<T extends HTMLElement> = Event & {
  target: T; 
  // probably you might want to add the currentTarget as well
  // currentTarget: T;
}

// use it instead of Event
let e: HTMLElementEvent<HTMLTextAreaElement>;

console.log(e.target.value);

// or in the context of the given example
emitWordCount(e: HTMLElementEvent<HTMLTextAreaElement>) {
  this.countUpdate.emit(e.target.value);
}

More Related Contents:

  1. How do I share data between components in Angular 2?
  2. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  3. Read response headers from API response – Angular 5 + TypeScript
  4. angular 2 sort and filter
  5. In Angular, What is ‘pathmatch: full’ and what effect does it have?
  6. Angular2 – FormControl Validation on blur
  7. Emit event from parent to child
  8. Angular4 Exception: Can’t bind to ‘ngClass’ since it isn’t a known property of ‘input’
  9. No provider for AngularFireDatabase, AngularFireAuth
  10. Multiple canActivate guards all run when first fails
  11. TS2531: Object is possibly ‘null’
  12. Custom ExceptionHandler change detection lag
  13. Trigger update of component view from service – No Provider for ChangeDetectorRef
  14. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  15. Pass parameter into route guard
  16. Typescript dependency injection public vs private
  17. Rxjs Retry with Delay function
  18. What is the meaning of question mark in expressions in Angular 2?
  19. Merging http observables using forkjoin
  20. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  21. Angular 2 translation change language in application
  22. Enabling CORS on Azure Active Directory
  23. How to run the Dist Folder on Local Machine in Angular 6+?
  24. How to delete a field in a Firestore Document?
  25. Angular2: use [(ngModel)] with [ngModelOptions]=”{standalone: true}” to link to a reference to model’s property
  26. How to manually set focus on mat-form-field in Angular 6
  27. What is the difference between fakeAsync and async in Angular testing?
  28. How to use angular 2 service with Ionic 2?
  29. Do I need to `complete()` takeUntil Subject inside ngOnDestroy?
  30. How to implement behavior subject using service in Angular 8

Leave a Comment