How to simulate user interaction on input and button elements?

Question

So I have a code here in this stackblitz example.

Basicly there is a simple form, with an input and a button. Pressing the button will copy the input's current value to a label:

after click:

html:

<input id="inputID" [(ngModel)]="inputValue" />
<button id="buttonID" (click)="set()">send</button>
<hr/>
<label> new Value: {{labelValue}} </label>
<hr/>

JS:

  labelValue = "";
  inputValue = "defaultValue";

  set(){
    this.labelValue = JSON.parse(JSON.stringify(this.inputValue));
  }

I have to simulate the user interaction using only native JS code. So I try the following (in browser console for instance):

 - document.getElementById('inputID').value = "aNewValue"; 
 - document.getElementById('buttonID').click();

The problem is this:

I got the default value in the label, not the current value. How can I get the right value? I suspect that it is something around reflected properties, but cannot figure out what can be the problem here.

Update: I have tried the following, with no luck either.

element = document.getElementById('inputID')
element.value = "aNewValue"; 
var ev = new Event('change', {
    view: window, 
    bubbles: true,
    cancelable: true,
  });
element.dispatchEvent(ev);
document.getElementById('buttonID').click();

Answer 1

Angular updates the model on input event. You should trigger it manually, after you set the value.

inputElement = document.getElementById('inputID');
buttonElement = document.getElementById('buttonID');

inputElement.value = "aNewValue";
inputElement.dispatchEvent(new Event('input', {
  view: window,
  bubbles: true,
  cancelable: true
}))
buttonElement.click();