Ionic 3/Angular 2 - Renderer2.setValue() doesn't update the value of my input field

Question

I'm trying to update the value of an input that isn't bound to a <form> in my component, and my research has lead me to use the Renderer2 service that Angular provides.

So I have my input that looks like this:

<input type="text" #zipEl placeholder="Enter zip">
<button type="button" (click)="getLocation()">
   <span>Use current location</span>
</button>

And in my component, I'm trying to just set the value simply like this:

@ViewChild('zipEl') zipEl:ElementRef;

constructor(private renderer: Renderer2) {

}

getLocation() {
    this.renderer.setValue(this.zipEl, '94085');
}

Though nothing is happening. When I click the button to run the function, the input box never gets its value updated with 94085. Does anyone know what I'm doing wrong here?

Thanks in advance!

Answer 1

I believe you need to use setProperty:

getLocation() {
    this.renderer.setProperty(this.zipEl.nativeElement, 'value', '94085');
}

Answer 2

Using Angular v4.0.2, I ended up using the .setAttribute() function shown here:

getLocation() {
    this.renderer.setAttribute(this.zipEl, 'value', '94085');
}