Learning Angular/

...

/

Detecting Input Binding Changes

Detecting Input Binding Changes

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

We'll cover the following...

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.

Press + to interact
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.

Press + to interact
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.

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