This is the archived documentation for Angular v5. Please visit angular.io to see documentation for the current version of Angular.

OnChanges

npm Package @angular/core
Module import { OnChanges } from '@angular/core';
Source core/src/metadata/lifecycle_hooks.ts

Lifecycle hook that is called when any data-bound property of a directive changes.

Interface Overview

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

How To Use

      
      @Component({selector: 'my-cmp', template: `...`})
class MyComponent implements OnChanges {
  @Input()
  prop: number;

  ngOnChanges(changes: SimpleChanges) {
    // changes.prop contains the old and the new value...
  }
}

Description

ngOnChanges is called right after the data-bound properties have been checked and before view and content children are checked if at least one of them has changed. The changes parameter contains the changed properties.

See "Lifecycle Hooks Guide".

Class Implementations

Members

      
      ngOnChanges(changes: SimpleChanges): void