Understanding Angular ngOnChanges Lifecycle Hook

Angular is an open-source Javascript framework that streamlines front-end development with powerful tools and modern browser features. If you are an Angular developer, you might have already come across the concept of lifecycle hooks that help you manage the timing of component creation, insertion, and destruction. In this article, we will explore one of the most popular lifecycle hooks – ngOnChanges.

What is ngOnChanges Lifecycle Hook in Angular?

ngOnChanges is a built-in Angular interface that is implemented by a directive or a component to receive changes to input properties within the component. Whenever Angular detects a change to an input property’s value, it triggers ngOnChanges.

Angular ngOnChanges lifecycle hook provides a way to take necessary action based on changes to the input properties. It provides a single method – ngOnChanges – that you can use to access and handle changes to the inputs.

How does Angular ngOnChanges Lifecycle Hook work?

As we said before, ngOnChanges is triggered every time the value of a bound input property changes in a component. The ngOnChanges method receives a SimpleChanges object that contains all the changes. It provides a single method – ngOnChanges – that you use to handle these changes.

The SimpleChanges object contains a change object for each input property that has changed. The change object contains both the previous and current values of the input property. This allows you to compare the values and take action accordingly.

Example of ngOnChanges Lifecycle Hook in Angular

Let’s assume that you have a component named ChildComponent that takes an input named hero. In your template, you bind the hero input to an object of the same name in the parent component.

“`
// ChildComponent.ts

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

@Component({
selector: ‘app-child’,
template: `

{{ hero }}

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

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

“`

In this example, the ngOnChanges method just logs the changes to the console, but you could modify the component based on the changes.

FAQs on ngOnChanges Lifecycle Hook

What is a lifecycle hook in Angular?

A lifecycle hook is an event triggered at a specific stage of a component’s lifecycle. Angular provides multiple lifecycle hooks that you can use to manage the timing of component creation, insertion, and destruction.

When is ngOnChanges Lifecycle Hook called?

ngOnChanges hook is called whenever the value of an input property bound to a directive or a component changes.

What is the type of the SimpleChanges object in ngOnChanges?

The SimpleChanges object is an Angular interface that contains all the changes made to an input property. It has a change object for each input property that has changed. The change object contains the previous and current values of the input property.

How can you check which input property has changed in ngOnChanges?

You can check which input property has changed by looping through the changes in the SimpleChanges object and comparing the previous and current values of the property.

Is it mandatory to implement ngOnChanges lifecycle hook in a component?

No, it is not mandatory, but it is a good practice to implement it to handle changes to the input properties in a component. By implementing the ngOnChanges method, you can take necessary action based on the changes to the input properties.

Conclusion

In this article, we have discussed the Angular ngOnChanges Lifecycle Hook and how it can be used to receive changes to input properties within a component. We have also provided an example and answered some common questions about it.

ngOnChanges gives you the flexibility to handle changes to input properties and react accordingly. You can use the SimpleChanges object to compare the previous and current values of the input property and take necessary action. Happy coding!