Home/

...

/

Untitled Masterpiece

Learn how to detect the input binding changes using lifecycle hooks of the Angular component.

The OnChanges lifecycle hook is called when Angular detects that the value of an input data binding has changed. We will use it in the product detail component to learn how it behaves when we select a different product from the list:

  1. Import the OnChanges and SimpleChanges artifacts in the product-detail.component.ts file.

import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';

  1. Modify the definition of the ProductDetailComponent class so that it implements the OnChanges interface.

export class ProductDetailComponent implements OnChanges

  1. Implement the ngOnChanges method that is defined in the OnChanges interface. It accepts an object of type SimpleChanges as a parameter that contains one key for each input property that changes. Each key points to another object with the properties currentValue and previousValue, which denote the new and the old value of the input property, respectively.

ngOnChanges(changes: SimpleChanges): void {
    const product = changes['name']; 
    const oldValue = product.previousValue; 
    const newValue = product.currentValue; 
    console.log(`Product changed from ${oldValue} to ${newValue}`);
}

The previous snippet tracks the name ...