@angular/core

OnChanges

interface

stable

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.  }}