Property 'value' does not exist on type 'HTMLElement'

Question

Inside a directive in Angular I did the following:

let input: HTMLElement = renderer.createElement('input');
renderer.appendChild(this.elem.nativeElement, input);

and when I try to get the value writen inside this input using:

console.log('value', input.value);

I get this error:

Property 'value' does not exist on type 'HTMLElement'.

Although we all now that to get value from input using javascript we do the following:

document.getElementById("searchTxt").value;

and document.getElementById() return either null or HTMLElement object:

/** * Returns a reference to the first object with the specified value of the ID or NAME attribute. * @param elementId String that specifies the ID value. Case-insensitive. */ getElementById(elementId: string): HTMLElement | null;

so why I get this error ?!!

Answer 1

Use HTMLInputElement instead:

let input: HTMLInputElement= renderer.createElement('input');

The HTMLElement interface has no "value" property in it, so you get those .ts errors. The HTMLInputElement interface extends HTMLElement and has a "value" property.