Angular Component Life Cycle hooks in simple language

I remember when I started learning Angular many years ago, I found component lifecycle hooks concept very confusing. Thanks to the writing style of the official Angular documentation. This is the reason why Angular is infamous for having a steep learning curve compared to its Opp, React. (If you do not know what Opp is, then you might be too old. Maybe drink some water and get some good sleep, haha). Let’s begin the article by discussing the different lifecycle hooks of the component in very simple words. Simple words mean in words that people who know the meaning of Opp word would understand them very easily.

The life of a component starts with instantiation using the Component’s constructor and dependency injection. Once the component is instantiated, it starts the change detection cycle for the component. Then it goes through different phases of the lifecycle for which you can use custom logic to perform any action by hooking into these phases. Below are all the available lifecycle hooks:

1. OnChanges — This lifecycle hook runs whenever there is a change in any input property of a component. So, as it is well understood by definition, this lifecycle hook can run multiple times.
2. OnInit — This runs when the component is initialized. Useful when you want to add some initialization logic or set some properties for the component. This hook runs only once during the component’s lifecycle. Input properties of a component may change multiple times, but the component will be initialized only once.
3. ngDoCheck — Detects any changes that Angular can’t figure out itself. Useful for custom change detection that cannot be detected by the OnChanges hook. As the definition itself suggests, this can also run multiple times as it runs during every change detection cycle.

Now before discussing the remaining hooks (ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked), it is necessary to clarify some concepts. These concepts are discussed below:

A] Content vs View Content literally means any content that is projected into the component from outside. It is not part of a component’s original view. View, on the other hand, is the component’s own template/view excluding any external projected content.

B] Init vs Checked Init hooks are run by Angular when any content or view is initialized for the first time when a component is instantiated using a constructor. These are only run once during the first change detection cycle.

Checked hooks are run by Angular when there is some change in the projected content or view of a component. So, these hooks will run multiple times during the change detection cycle. This is why it is generally not recommended to use checked hooks because these are expensive operations due to the fact that they may run every time there is a change in content or view. This can degrade performance.

Now that these concepts are clear, let’s jump into the remaining lifecycle hooks.

1. ngAfterContentInit — Runs when the external content is projected into the component. Only runs once after the first ngDoCheck.
2. ngAfterContentChecked — Runs whenever there is a change in the projected content of a component. May run multiple times during the change detection cycle. Runs after ngAfterContentInit and all subsequent ngDoChecks.
3. ngAfterViewInit — Runs after the component view is initialized. Only runs once after the first ngAfterContentChecked.
4. ngAfterViewChecked — Runs whenever there is a change in the component’s view or child views. May run multiple times after ngAfterViewInit and subsequent ngAfterContentChecked.
5. ngOnDestroy — Runs when Angular destroys the component.

I hope this simple explanation will help you in interviews and you will not get confused during them.