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.

Comments

[Justin Henry]

I would recommend as a next article to dive into change detection, as it elaborates on the concept of ngDoCheck. Converting default components to use OnPush change detection should improve performance for many components and utilizing ChangeDetectorRef to tell the component to trigger change detection explicitly can give the developer more power in how to fine tune their components.

Another aspect of change detection to dive into would be the async pipe, which will update the template on observable emission without needing to trigger the change detection manually, which makes it useful in OnPush in reducing the number of explicit triggers of the ChangeDetectorRef.

Of course much of this will shift once Signals is officially released and fully supported. That will be an entirely separate book.

[Pantelis Papasavvas]

Hello Justin.
I'll manage to create an article to dive deeper into that concept.

Thanks for your feedback.

[Pierre Bouillon]

It would have been great to mention afterRender and afterNextRender as well

[Pantelis Papasavvas]

Hello Pierre.
In my opinion, those hooks are not commonly used so I left them out of this article.
I'll create a new one for those.

Thanks for your feedback.