0Pricing
Angular Academy · Lesson

ngOnChanges and Input Changes

React to changes in input properties.

Reacting to Input Changes

The OnChanges hook lets a component react whenever its @Input properties change. Angular calls ngOnChanges before ngOnInit and on every input update.

Implementing OnChanges

Implement the OnChanges interface and add a ngOnChanges method that receives a SimpleChanges object.

import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnChanges {
  @Input() count = 0;
  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
  }
}

All lessons in this course

  1. ngOnInit and Initialization
  2. ngOnChanges and Input Changes
  3. ngOnDestroy and Cleanup
  4. AfterView and AfterContent Hooks
← Back to Angular Academy