ngonchanges example angular 7

ngOnChanges is a callback method. It is used to detect the changes in input property in angular programming. The directive also implements the ngOnChanges method so that it can respond to changes in the value of the input property. ngOnChange is called immediately data-bound properties through the default change detector. When the default change detector has checked the data-bound properties then the ngOnChange method is called. You can say ngOnChange is a lifecycle hook. And It’s called when any data-bound property of directive change. The ngOnChange lifecycle-hook is called when the angular ChangeDetection directs an @Input change in your component.

interface OnChanges {
  ngOnChanges(changes: SimpleChanges): void
}

Methods of ngOnChanges

ngOnChanges(changes: SimpleChanges): void

changes are parameters. and SimpleChanges are the properties of change. And the void is returned.

Examples:

I am going to create a directive that supports two one-way bindings. The binding whose target is paModel will be updated when the value of the newProduct.name property changes, which provides a flow of data from the application to the directive and will be used to update the contents of the input element.

The custom event, paModelChange, will be triggered when the user changes the contents of the input element and will provide a flow of data from the directive to the rest of the application. To implement the directive, I added a file called twoway.directive.ts to the src/app folder and used it to define the directive shown in the following example.

import { Input, Output, EventEmitter, Directive,
 HostBinding, HostListener, SimpleChange } from "@angular/core";
@Directive({
 selector: "input[paModel]"
})
export class PaModel {
 @Input("paModel")
 modelProperty: string;
 @HostBinding("value")
 fieldValue: string = "";
 ngOnChanges(changes: { [property: string]: SimpleChange }) {
 let change = changes["modelProperty"];
 if (change.currentValue != this.fieldValue) {
 this.fieldValue = changes["modelProperty"].currentValue || "";
 }
 }
 @Output("paModelChange")
 update = new EventEmitter<string>();
 @HostListener("input", ["$event.target.value"])
 updateValue(newValue: string) {
 this.fieldValue = newValue;
 this.update.emit(newValue);
 }
}

This directive uses features that have been described previously. The selector property for this directive specifies that it will match input elements that have a paModel attribute. The built-in ngModel two-way directive has support for a range of form elements and knows which events and properties each of them uses, but I want to keep this example simple, so I am going to support just input elements, which define a value property that gets and sets the element content.

The paModel binding is implemented using an input property and the ngOnChanges method, which response to changes in the expression value by updating the contents of the input element through a host binding on the input element’s value property.

The paModelChange event is implemented using a host listener on the input event, which then sends an update through an output property. Notice that the method invoked by the event is able to receive the event object by specifying an additional argument to the @HostListener decorator, like this:

...
@HostListener("input", ["$event.target.value"])
updateValue(newValue: string) {
...

Some more code to clarify:

parent component :

import { Component, OnInit } from '@angular/core';
 
@Component({
 selector: 'my-app',
 template: `<strong>Component used with input:</strong>
 <hello [sometingForChild]="inputFromParent"></hello>`
})
 
export class AppComponent implements OnInit {
 inputFromParent;
 
 ngOnInit(){
 this.inputFromParent = 'first call'; 
 // First change. ngOnChanges of HelloComponent(child) will be called at   
 // first here.
 
 setTimeout( ()=>{ this.inputFromParent = 'second call'}, 1500 );
 // Second change. ngOnChanges of HelloComponent will be called second    
 // time here.
 }
}

child component:

import { Component, Input, SimpleChanges } from '@angular/core';
 
@Component({
 selector: 'hello',
 template: `{{whatIsInInput}} {{whatWasInInput}}`
})
 
export class HelloComponent {
 @Input() sometingForChild: string;
 
 whatIsInInput : string;
 whatWasInInput : string;
 
 ngOnChanges(changes: SimpleChanges) {
   this.whatIsInInput = changes.sometingForChild.currentValue;
   this.whatWasInInput = changes.sometingForChild.previousValue;
 }
}

Output:

first call

second call first call // after 15 seconds

visit the angular tutorial list. And make strong your angular concept. click here. wuschools.com is always written about the angular concept for the angular lover. And writes about how angular makes your life easy if you are a web site developer.

Read More!

ngonchanges example angular 8

ngonchanges example angular 6

ngonchanges example angular 5

ngonchanges example angular 4

If you want to read more: Then visit the official document. Angular.