Angular on html change

Содержание

NgModelChange & Change Event in Angular
NgModelChange Example
ngModel
ngModelChange with ngModel
Change Event
Change Event Example
NgModelChange Vs Change
References
4 thoughts on “NgModelChange & Change Event in Angular”
Leave a Comment Cancel Reply
ngModelChange and change events in Angular with examples
Table of Contents
Understand ngModelChange event using simple example
Multiple ngModelChange events.
Understand change event using simple Example
Summary of differences between ngModelChange vs change .
Angular on html change

NgModelChange & Change Event in Angular

NgModelChange is an Angular specific event, which we can use to listen for changes to the user input. It is the @Output property of the ngModel directive, Hence we need to use it along with it. ngModle raises the NgModelChange event, whenever the model changes. Another way to listen for change is to use the change DOM event. We also learn how to use them and also the difference between change & ngModelChange .

If you are using template driven forms or reactive forms, then the better way to listen for changes is using the ValueChanges observable

NgModelChange Example

The following is the simple example of ngModelChange .

We assign the method in the component class (handler function) to the ngModelChange using the event binding syntax

nameChanged is the handler function, which we need to define in the component class. We can access the new value by using the $event as an argument to the handler function.

ngModel

We usually use the ngModel as follows to achieve the two-way binding. [(ngModel)]=»email» keeps the email property in the component class in sync with the template.

Internally, Angular converts the above syntax to the following syntax.

The component property email is bound to the input element using the property binding ( [ngModel]=»email» ). Any changes made to the input is updated in the component using the (ngModelChange)=»email = $event» event binding.

ngModelChange with ngModel

Consider the following example.

The Angular converts the above to the following syntax. We end up with the two ngModelChange event bindings.

Here the ngModelChange fires in the order it is specified. Hence the (ngModelChange)=»firstName = $event» fires first. (ngModelChange)=»firstNameChanged($event)» fires later.

Hence in the component class, the arg & this.firstName is always the same.

But if you put ngModelChange ahead of the ngModel as in the example below

Angular internally converts it as follows

Here (ngModelChange)=»lastNameChanged($event)» fires first. Hence in the component class arg contains the latest value of the, while this.lastName still holds the previous value

Change Event

The (change) is a DOM event fires when changes to the form fields like , , and is committed by the user.

user changes the input & moves the focus away from the text box (blur event)
On 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.

The change event for text element fires when we move the focus away from the element (blurred the input). This is different from the ngModelChange, which fires the event for each input change.

The other import point is the $event parameter. In the ngModelChange , it is always the new value. But in the case of a change event, it is event data. The event data is an object containing data about the event. We need to use the target.value to access the value.

NgModelChange Vs Change

NgModelChange	Change
NgModelChange is Angular specific event	Change is a DOM Event and has nothing to do with the Angular.
We must use the ngModelChange along with the ngModel directive	You can use change event on , , and form elements.
ngModelChange event passes new value	Change event passes event parameter, Use the target.value to access the new value
ngModelChange will trigger with each input change	Change event fires when you remove the focus from input text after changing the content.

References

4 thoughts on “NgModelChange & Change Event in Angular”

If nothing seems to work, check the terminal window where you launched the server with ng serve . If you see this error Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’. , then check app.module.ts in @NgModule > imports to see if FormsModule is present. (Other subject) The point the author is making at the end of the section **ngModelChange with ngModel** is that you should not put the (ngModelChange) before [(ngModel)] . Here are my logs showing the correct order for firstName, and incorrect order for lastName:

app.component.ts:23 firstNameChanged
app.component.ts:23 firstNameChanged
app.component.ts:23 firstNameChanged
app.component.ts:23 firstNameChanged
app.component.ts:23 firstNameChanged
app.component.ts:27 lastNameChanged
app.component.ts:27 lastNameChanged
app.component.ts:27 lastNameChanged
And I just noticed, but if you have any problem, it looks like the author adds a link to his code in **Reference** > Source code at the end of the page before the Comment section, and you can see his code and preview the result.

ngModelChange and change events in Angular with examples

ngModelChange is the @output property of ngModel directive. and it’s specific to Angular framework.

Where as (change) event is classic HTML DOM event, independent of Angular framework triggered when a change happened in input element.

In this tutorial we will understand the differences between (ngModelChange) and (change) events by going through few examples.

Understand ngModelChange event using simple example

In Angular, We will use ngModel for two way data binding.

Whenever a change happens in ngModel , Angular will trigger ngModelChange event.

We will create a component in our Angular project called NgModelChange .

export class NgmodelchangeComponent implements OnInit < user = new User(); userNamengmodelchange(value)< console.log(value); console.log(this.user.Name) >phoneNumberngmodelchange(value) < this.user.PhoneNumber = value; console.log(value); >constructor() < >ngOnInit(): void < >> export class User

And in component html file I am binding User object properties to the input elements.

User Name: Phone Number: User Name is >
 Phone Number is >

Now whenever I change the input elements, the paragraph element will be updated with the latest value because of two way data binding.

You might be thinking that (ngModelChange) event won’t be triggered as we have not written it. But you are wrong.

Have a look at ngModel directive source code

export class NgModel extends NgControl implements OnChanges, OnDestroy < /** * @description * Event emitter for producing the `ngModelChange` event after * the view model updates. */ @Output('ngModelChange') update = new EventEmitter(); /** * @description * Sets the new value for the view model and emits an `ngModelChange` event. * * @param newValue The new value emitted by `ngModelChange`. */ viewToModelUpdate(newValue: any): void < this.viewModel = newValue; this.update.emit(newValue); >>

NgModel has a property called output bound to an EventEmitter instance, and when a change happens in view model, it will emit the ngModelChange event.

From this we can come to a conclusion that, we cannot use (ngModelChange) event without ngModel . i.e., it’s specific to Angular framework only.

Now we will pass a custom ngModelChange function.

 // In Component.ts file userNamengmodelchange(value) < console.log(value); //Changed Value console.log(this.user.Name) //undefined >

The above code won’t update the ngModel property and user.Name will be undefined.

Because we are not updating ngModel property with the new changed value.

// In Component.ts file userNamengmodelchange(value) < console.log(value); //Changed Value console.log(this.user.Name) //undefined this.user.Name = value; >

ngModelChange event parameter contains the changed value.

If we use two way binding syntax for ngModel the value will be updated.

 // In Component.ts file userNamengmodelchange(value) < console.log(value); //Changed Value console.log(this.user.Name) //Changed Value >

The above input tag will be converted to

So the default (ngModelChange) function will update the value of ngModel property. i.e., user.Name .

And the second (ngModelChange) will be triggered printing the user name value in the console.

So to avoid confusion, it’s better to follow one single approach.

Either use shorthand notation of ngModelChange i.e., [(ngModel)] , or define a new ngModelChange function and update the value in that function.

 userNamengmodelchange(value) < console.log(value); //Changed Value console.log(this.user.Name) //undefined this.user.Name = value; // Update the value here >

Multiple ngModelChange events.

We can attach multiple ngModelChange events to an HTML tag.

And they will be called in the order of their placement in the HTML tag.

 //in the component.ts file userNamePrint()

Understand change event using simple Example

(change) event is triggered when an input form field value changed by user.

User Name: changeUserName(e)

And (change) function parameter contains classic event properties.

To get the value of changed value we need to use e.target.value property.

And it will be triggered only when we move the focus away from the input element i.e., blurred the input.

Where as (ngModelChange) triggered on each and every input change.

User Name: changeUserName(e)

The above code won’t trigger the (ngModelChange) because of we have not used ngModel property binding.

User Name: changeUserName(e)

The value is updated by change event. As we used [ngModel] , on each input change ngModelChange will be called. And the UI is updated with the new value only when focus move away from the element.

Читайте также: 502 Bad Gateway

Because ngModel updated in change event.

Summary of differences between ngModelChange vs change .

Actually it’s wrong to compare ngModelChange event with classic HTML change event.

ngModelChange is something specific to Angular, which is used to track the changes happened to ngModel property.

ngModelChange	change
ngModelChange is an Angular Event	change event is classic HTML DOM event independent of Angular
We cannot use ngModelChange without ngModel	change event is not related to two way binding we can use it on any HTML form element
ngModelChange event is called on each input change	change event is called only when focus move away from the element
ngModelChange parameter contains the changed value	change contains event parameter, to access the changed value we need to use e.target.value
ngModelChange triggered when a change happened to ngModel irrespective of focus of the element.	change event triggers when the user changes the input.(depends on focus of the element)

Источник