A lifecycle hook that is called when any data-bound property of a directive changes. Define an ngOnChanges() method to handle the changes.

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

See also

• DoCheck

• OnInit

• Lifecycle hooks guide

Methods

Usage notes

The following snippet shows how a component can implement this interface to define an on-changes handler for an input property.

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

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