• Overview
@angular/core

OnChanges

interface
stable

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

API

    
      interface OnChanges {}
    
    

ngOnChanges

void

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.

@paramchangesSimpleChanges

The changed properties.

@returnsvoid

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: `...`,
        standalone: false,
      })
      class MyComponent implements OnChanges {
        @Input() prop: number = 0;

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