Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

OnChanges

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

Methods

A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

      
      ngOnChanges(changes: SimpleChanges): void
    
Parameters
changes SimpleChanges

The changed properties.

Returns

void

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 {
  @Input() prop: number = 0;

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