2

I have a scenario where the textbox might change but not resulting from user input and I need to detect this change. Input defined as following:

<input type="text" (change)="onChange($event)" >

And in .ts I have the onChange method:

onChange(event:any){
  // something todo here
}

From what I understand, that should work in Angular 9, but the event is not firing. What am I missing?

4
  • The real question is, what is causing the change?
    – MikeOne
    Jul 19, 2020 at 17:57
  • Might be user input or click on autocomplete option
    – eddyuk
    Jul 19, 2020 at 19:21
  • In that case, (input) and/or (change) should capture most events. However, it might be better to not use an event handler at all but instead use a reactive form input.
    – MikeOne
    Jul 19, 2020 at 19:40
  • In my case I do have reactive input but I need to notify other controls when text is changed
    – eddyuk
    Jul 20, 2020 at 6:28

4 Answers 4

2

You can try these ways ..

In angular you can do like this: <input type="text" (keyup)="myFunction(this)"> you can use (keyup)="yourFunction()" event.

CASE 1

You can use onkeyup event

function myFunction(e) {
  console.clear();
  console.log(e.value);
}
<form>
   <label for="fname">First name:</label><br>
   <input type="text" id="fname" name="fname" onkeyup="myFunction(this)"><br>
</form>

CASE 2

You can use oninput event

function myFunction(e) {
  console.clear();
  console.log(e.value);
}
<form>
   <label for="fname">First name:</label><br>
   <input type="text" id="fname" name="fname" oninput="myFunction(this)"><br>
</form>

1
<input type="text" (keyup)="onChange($event)" >

Use keyUp event for input element.

0

Try to use input event as

<input type="text" (input)="onChange($event)" >

and it will work with you

1
  • That's what I was about to say. The reason: The change event is fired for <input>, <select>, and <textarea> elements when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value. developer.mozilla.org/en-US/docs/Web/API/HTMLElement/…
    – alou
    Jul 19, 2020 at 15:14
0

the issue

Changing the value programatically does not trigger the change event.

emit your own event

You can create your own Event using the Event API. You will need access to the node you are binding the Event to ( you can use ViewChild)

See a live example in this stackblitz demo.

app.component.ts

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  value = '';
  @ViewChild('input') input;
  onChange(event:any){
    alert('change event triggered');

  }
  changeValue() {
    this.value = 'Value set';
    // also trigger an event on the input.
    let event = new Event('change');
    this.input.nativeElement.dispatchEvent(event);
  }
}

app.component.html

<input #input type="text" (change)="onChange($event)" [value]='value'>
<button (click)='changeValue()'>Change</button>;

or

Or you can do it another way and run the code in the onChange method directly after programatically changing the value. Note that you may need to refactor your code in order not to rely on an emitted $event.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.