how to bind on an event to get notified as the text is being entered

i am learning how to bind some events on input html tag. so as shown in the below posted html file, there is binding on the following states

(onchange) and (oninput)

when i run the App i enter text in the input filed but the following occures:

as i am enterting/typing text to input filed, non of onInputFieldChanged nor onInputFieldHasInput was called or executed. please let me know how to bind on an event on the input tag so that i get notified as there is a text being entered in the input filed. In otherwords, as i am typing text i want a corresponding function to be called with the text being entered is passed as an argument “event”

please let me know how to bind on an event so that i get notified as the text is being entered

html:

<span class="classDestinationLng" style="margin-right:10px">
  <label for="destinationLngLabel">destination Longitude:</label>
  <input (change)=onInputFieldChanged($event) (oninput)=onInputFieldHasInput($event)>
</span>
<span>
  <button>confirm</button>
</span>

component:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FormOnInputAndOnChange1';

  onInputFieldChanged(event: any) {
    console.log("onChangeEventReceived: ", event)
  }
  onInputFieldHasInput(event: any) {
    console.log("onInputEventReceived: ", event)
  }
}

Answer

use the input event to capture the change as shown here

component.html

<input (input)="changeInput($event)" value="">

<input (input)="changeInputUsingModel()" value="" [(ngModel)]="inputValue">

component.ts

export class AppComponent {
  inputValue: string;

  changeInput($event) {
    console.log($event.target.value);
  }

  changeInputUsingModel() {
    console.log(this.inputValue);
  }
}

Advertisement

Answer