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

Sampath picture Sampath · May 8, 2017 · Viewed 25.2k times · Source

I have tried to set the value of #name1 as shown below.But it shows compile time error as shown below.Can you please tell me how to set the value for the text component? Here I'm using one-way data bind and template-driven approach.

[ts] Property 'value' does not exist on type 'ElementRef'.

.html

<ion-input type="text" name="{{question?.name}}" #name1="ngModel" ngModel> </ion-input>

.ts

  @ViewChild('name1') name1: ElementRef;

  constructor(){

   }

 getAnswer(){
     this.name1.value = 'Hello';//here it shows the above error
  }

Answer

G&#252;nter Z&#246;chbauer picture Günter Zöchbauer · May 8, 2017

Use the components type instead of a template variable

@ViewChild(TextInput) name1: TextInput;

This might also work (I don't know Ionic). It would work with a native HTML input element, but above is the preferred way if it's an Angular component.

this.name1.nativeElement.value = 'Hello';