Angular Components Lifecycle - Basics

As developers working with Angular, we rely on its lifecycle hooks to manage how our components are created, updated, and destroyed. Understanding these hooks is key to building reliable and high-performance applications.

In this article, we'll explore these essential lifecycle hooks offered by Angular, unraveling their roles and significance in the development process of robust, dynamic applications.
Let's start

constructor

This is a standard Javascript class constructor.
Runs when Angular instantiates the component.

ngOnInit

The ngOnInit runs when Angular has initialized the component's inputs.
It runs only once before the component's template is initialized.
Inside ngOnInit, is a good place to fetch your initial data.

ngOnChanges

ngOnChanges runs every time that an input value is changed.
This happens before the template is initialized and the first ngOnChanges will run before the ngOnInit.
Here you can update the component's state based on input values.

The ngOnChanges accepts an argument of type SimpleChanges.
This is an object that contains the input's previous value, its current value, and a flag for whether this is the first time the input has changed.

ngDoCheck

It runs every time Angular checks a component for changes.
With this hook, we can manually check for changes outside of Angular's change detection and change the state of a component.

Using this hook may affect the performance of the page and for that reason, we need to use it if we don't have anything else to do.
In contrast with ngOnChancges, the first ngDoCheck runs after ngOnInit.

ngAfterViewInit

As its name says, that hook runs after the template and its children have been initialized, and runs only one time.

ngOnDestroy

This method runs once when the component is destroyed.
This means that the component is not available in the DOM anymore.
Keep in mind that if you have any subscriptions in the component you need to unsubscribe them. This is a good place to do that.