OnChanges - Angular

A lifecycle hook that is called when the value of one or more component or directive inputs change. This includes both signal-based and decorator-based inputs. Define an ngOnChanges() method to handle the changes.

API

interface OnChanges {
  ngOnChanges(changes: { [propName: string]: SimpleChange<any>; }): void;
}

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.

@paramchanges{ [propName: string]: SimpleChange<any>; }

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. While you should prefer computed and effect when working with signal-based inputs, the ngOnChanges method does include value changes for signal-based inputs.

@Component({ ... })
export class UserProfile implements OnChanges {
  userId = input<number>(0);
  ngOnChanges(changes: SimpleChanges<UserProfile>) {
    // changes.userId contains the old and new value.
  }
}