ngOnChanges Example | Angular

Key Takeaways

• ngOnChanges() fires whenever one of the component's input properties changes, especially useful for tracking changes from parent to child.
• It takes a changes object of type SimpleChanges that reflects the state of the change.
• Changes made within the child component won't trigger ngOnChanges().
• ngOnChanges() is more dynamic compared to ngOnInit(), which only runs once.
• Use ngOnChanges() when you need to respond to changes on input-bound properties.

Understanding ngOnChanges with Updated Example

The ngOnChanges() lifecycle method in Angular is one of the most powerful hooks for managing data-bound property updates. As of Angular 16, its usage remains a cornerstone for scenarios where input property changes need tracking from parent to child components. Let's revisit its functionality and see how you can efficiently use it in your Angular projects.

Child Component

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

@Component({
  selector: 'app-child',
  template: `
    Change from child
    

    {{parentData}}
  `
})
export class ChildComponent implements OnChanges {
  @Input() parentData: any;

  changeFromChild() {
    this.parentData -= 1;  // This won't trigger ngOnChanges()
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }
}

In this child component, any change to parentData from the parent will invoke ngOnChanges(), while changes within the child itself won’t trigger the hook.

Parent Component

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    Change from parent
    

    
  `
})
export class ParentComponent {
  data = 0;

  changeFromParent() {
    this.data += 1;
  }
}

When changeFromParent() is executed, it updates data on the parent, which in turn updates parentData on the child, thus invoking ngOnChanges().

Working with SimpleChanges

Every call to ngOnChanges() provides a SimpleChanges object, reflecting the nature of the changes:

{
  parentData: {
    currentValue: 1,
    previousValue: 0,
    firstChange: false
  }
}

This object not only tells you the current and previous values but also flags if it's the first change.

Comparison: ngOnChanges vs ngOnInit

The key difference between ngOnChanges and ngOnInit lies in their timing and purpose. While ngOnInit is invoked once upon component initialization, ngOnChanges kicks in each time an input property is changed from the parent, offering a dynamic response mechanism to data updates. Remember that without input property changes, ngOnChanges doesn't trigger.

When to Use ngOnChanges?

Utilize ngOnChanges when you need to monitor and react to the evolution of input-bound properties. This is especially handy for performing custom logic like recalculating derived data when the input changes. Just keep in mind, changes originating from child components won't affect this lifecycle hook.

FAQ

Why doesn't ngOnChanges trigger for changes made within a child component?

Because ngOnChanges only concerns changes to input-bound properties from the parent. The idea is to respond to external data changes, not internal ones.

Is ngOnInit still necessary if I'm using ngOnChanges?

Yes, ngOnInit serves initial setup purposes, such as fetching data on initialization, and complements ngOnChanges by handling initial state setup, which isn't typically suited for dynamic input change responses.

How does ngOnChanges handle multiple inputs?

For components with multiple inputs, each input change is tracked in the SimpleChanges object with its corresponding changes, allowing you to see what's changing across various bound properties.