Angular: why <input> value changes (using renderer2) doesn't trigger the events bind to that <input>

Question

when i change the input value by typing something, the (keyup), (change) and (ngModelChange) events all fire;
when i change the input value by renderer2, none of the events fire

what i want:

I want to programmatically type something so that the events on that input event fires

relevant code:

import { Component, OnInit, OnChanges, AfterViewInit ,ElementRef, Renderer2, ViewChild, ViewChildren } from '@angular/core';


@Component({
  selector: 'dom-comp',
  template: `

  <p><b>the Issue</b>: when i try to change the value of an input field by renderer2 - the (change) and (ngModelChange) events are not triggered, even though the values are changed !!</p>
  <input type='text' #myIn placeholder="if you type here, events will trigger"  [(ngModel)]='myInputVal' 
(change)="inputChanged()" 
(ngModelChange)="ngModelChanged()" 
 (keyup)="keyPressed($event)"
/> <br/>{{myInputVal}}

<br/>
<button #myBtn type="button" (click)='setFocusAndVal()'>press this button to change the value of the input field</button>

  `,
  styles: [ `input{width:90vw;}` ]
})
export class DomComponent implements OnInit, OnChanges, AfterViewInit {
  subTitle = 'Dom Component';
    @ViewChild('myIn')myInput:ElementRef;
    @ViewChild('myBtn')myButton:ElementRef;


    constructor(private elR:ElementRef, private rend:Renderer2){}

    ngOnInit(){}
    ngOnChanges(){}

    ngAfterViewInit(){
        console.log(this.myInput);
        //this.rend.setStyle(this.myInput.nativeElement, 'background', 'lightBlue');
        //this.rend.setStyle(this.myInput.nativeElement, 'color', 'red');
        this.myInput.nativeElement.focus();        
    }

    keyPressed(event){
        console.log("key pressed",event.target.value);

    }

    setFocusAndVal() {
        this.myInput.nativeElement.value = 'triggered by (button)';
        this.myInput.nativeElement.focus();
        setTimeout(()=>{ this.myInput.nativeElement.value = ' '; }, 1000);
        setTimeout(()=>{ this.myInput.nativeElement.value = ''; }, 3000);
        this.myButton.nativeElement.focus();
    }

    inputChanged() {
        console.log("inside inputChanged");
        this.rend.setProperty(this.myInput.nativeElement, 'value', 'triggered by (change)');
        this.myInput.nativeElement.focus();
        setTimeout(()=>{ this.rend.setProperty(this.myInput.nativeElement, 'value', ' '); }, 1000);
    }

    ngModelChanged(){
        console.log("inside ngModelChanged");
    }

}

can you please explain why you would like to do it this way? You have already 2 way data-binding for myInputVal in this example. add an @input for that and set the value through that. I don't really see the need for low-level functions, which in general most people tell you to stay away from. — jcuypers
– jcuypers, Commented Apr 15, 2019 at 12:25
I want to know if there is an alternative to trigger (from jQuery) - was planning on using it as a plan B for this: stackoverflow.com/questions/55668429/… — Akber Iqbal
– Akber Iqbal, Commented Apr 15, 2019 at 12:28

Niraj · Accepted Answer · 2019-04-15 12:56:37Z

0

You can try to add listen method of renderer2 in ngAfterViewInit

ngAfterViewInit(){
        console.log(this.myInput);

        this.renderer.listen(this.myInput.nativeElement, 'keyup', () => {
             //Add your stuffs
        });

        //this.rend.setStyle(this.myInput.nativeElement, 'background', 'lightBlue');
        //this.rend.setStyle(this.myInput.nativeElement, 'color', 'red');
        this.myInput.nativeElement.focus();        
    }

edited Apr 15, 2019 at 12:56

answered Apr 15, 2019 at 12:32

Niraj

7937 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jcuypers Over a year ago

sure this works, but in the end you are just emulating the setproperty / setvalue which has this listener setup by default...

Akber Iqbal Over a year ago

not working, check the same stackblitz code with your suggestion incorporated

Akber Iqbal Over a year ago

Keyup updated on stackblitz about 90 mins. earlier too

Collectives™ on Stack Overflow

Angular: why <input> value changes (using renderer2) doesn't trigger the events bind to that <input>

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related