ngonchanges example angular 6

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 is parameters. and SimpleChange is the properties of change. And the void is returned.

Example:

Something odd happened in the previous example: adding a new item affected the appearance of the new elements but not the existing elements. Behind the scenes, Angular has updated the value of the bgClass property for each of the directives that it created—one for each td element in the table column—but the directives didn’t notice because changing a property value doesn’t automatically cause directives to respond.

To handle changes, a directive must implement the ngOnChange method to receive notifications when the value of an input property changes, as shown in the following examples.

import { Directive, ElementRef, Attribute, Input,
 SimpleChange } from "@angular/core";
@Directive({
 selector: "[pa-attr]"
})
export class PaAttrDirective {
 constructor(private element: ElementRef) {}
 @Input("pa-attr")
 bgClass: string;
 ngOnChanges(changes: {[property: string]: SimpleChange }) {
 let change = changes["bgClass"];
 let classList = this.element.nativeElement.classList;
if (!change.isFirstChange() && classList.contains(change.previousValue)) {
 classList.remove(change.previousValue);
 }
 if (!classList.contains(change.currentValue)) {
 classList.add(change.currentValue);
 }
 }
}

The ngOnChange method is called once before the ngOnInit method and then called again each time there are changes to any of a directive’s input properties. The ngOnChange parameter is an object whose property names refer to each changed input property and whose values are SimpleChange objects, which are defined in the @angular/core module. TypeScript represents this data structure as follows:

...
ngOnChanges(changes: {[property: string]: SimpleChange }) {
...

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

Another Example

The directive also implements the ngOnChanges method so that it can respond to changes in the value of the input property. And you can see in the following example.

import {
 Directive, ElementRef, Attribute, Input, SimpleChange
} from "@angular/core";
@Directive({
 selector: "[pa-attr]"
})
export class PaAttrDirective {
 constructor(private element: ElementRef) { }
 @Input("pa-attr")
 bgClass: string;
 ngOnChanges(changes: { [property: string]: SimpleChange }) {
 let change = changes["bgClass"];
 let classList = this.element.nativeElement.classList;
 if (!change.isFirstChange() && classList.contains(change.previousValue)) {
 classList.remove(change.previousValue);
 }
 if (!classList.contains(change.currentValue)) {
 classList.add(change.currentValue);
 }
 }
}

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

Read More!

ngonchange example angular 8

ngonchange example angular7

ngonchange example angular 5

ngonchange example angular 4

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