Angular Input Change Event :

 Angular Change Event :

The (change) is a DOM event fires when changes to the form fields like <input>, <select>, and <textarea> are committed by the user.

 Video tutorial : https://youtu.be/qou1SDN_m2Y 

This Event Fires When :

·       user changes the input & moves the focus away from the text box (blur event)

·       On <select> it fires when the user selects a new option either by a mouse click or using a keyboard.

·        Fires when the state of a check box or radio button change due to users action

 

Change Event Example :

The following example shows how to use the change event in Angular.

[app.component.html]

<label>Enter a Text </label> <input class="textInput" type="text" (change)="changeHandler($event)" />

 

[app.component.ts]

export class AppComponent {   changeHandler(args) {     console.log(args);     alert('A change has made');   } }

 

Sample : https://stackblitz.com/edit/angular-ivy-kjncad?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts