Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
Angular has a new websiteHead 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...
  }
}