Angular Life-cycle Hooks

This blog is about the life cycle hooks which get executed when an angular component loads.

Introduction

When we create any Angular component we generally see a method created by default in its typescript file, ngOnInit(), what exactly is that? Or if there is any kind of tweak we want to do while loading a component before the entire application loads what could be the best place to do that?

We are going to discuss these types of things in this blog, or in short we are going to discuss Angular Life-cycle Hooks.

Angular Life-cycle Hooks

Below are the life-cycle hooks provided by Angular framework:

1. ngOnChanges
2. ngOnInit
3. ngDoCheck
4. ngAfterContentInit
5. ngAfterContentChecked
6. ngAfterViewInit
7. ngAfterViewChecked
8. ngOnDestroy

All these hooks get executed one after the other in the above mentioned sequence when any angular component loads in the memory.

We will be discussing all these hooks one by one in detail.

1. ngOnChanges: This is the only life-cycle hook which works with a parameter. This life cycle hook is the first one to get executed when the component loads. After that if there is any change in the value of property which is decorated with @input decorator then this hook gets executed. @input decorated property means when we are passing something from parent to child component. And yes, it means for this particular action there has to be a parent-child relationship between the components.
   The parameter it accepts is of type SimpleChanges this type basically contains 3 properties: currentValue, previousValue and firstChange. The currentValue and previousValue holds the current and the previous values of the property and the third property firstChange, specifies if this property is being changed for the first time or not.
2. ngOnInit: This life-cycle hook only executes once and that is when the component initializes. This hook executes only during the execution cycle after ngOnChanges but not on any action. Generally, we make the external API calls for the initially required data in this life-cycle hook.
3. ngDoCheck: This life-cycle hook gets executed when there is any change detected in the component. First it executes during the execution cycle of the hooks and then on any change detection in the component. That change can be anything, like a button click, or any change in the property, etc.
4. ngAfterContentInit: This life-cycle hook gets triggered after ngDoCheck in the execution cycle of hooks and besides that, whenever there is a content projection from parent component to child. We make use of <ng-content> to use that content.

   <comp>projected Data</comp>

   <ng-content></ng-content>

   Wherever we will be using this <ng-content> in the child component we will have the projected data from the parent over there.

5. ngAfterContentChecked: This life-cycle hook gets triggered after ngAfterContentInit in the execution cycle of hooks and besides that whenever there is a change in the projected content from parent component to child. In the above example, we are projecting the hard-coded value projected Data, instead if there is any property which is binded and gets changed at runtime, that will make this projected data change and trigger this life-cycle hook.
6. ngAfterViewInit: This life-cycle hook gets triggered after ngAfterContentChecked in the execution cycle of hooks. This hook gets triggered when the component gets initialized.
7. ngAfterViewChecked: This life-cycle hook gets triggered after ngAfterViewInit in the execution cycle of hooks. This hook gets triggered when the component and its associated child components get initialized.
8. ngOnDestroy: This is the last life-cycle hook in the hooks execution cycle and gets executed after ngAfterViewChecked hook. This hook destroys/removes the component and its related objects from the memory. This hook executes whenever we move away from the component.

Note:

• We can use these hooks in the component's typescript file directly with their names but as per the best coding practice we must implement the interface of the corresponding life-cycle hook in the class while using these hooks. The name of the interface is same as the name of the hook, except "ng", e.g. the interface name of ngOnInit is OnInt, ngOnChanges is OnChanges, and so on.
• Generally, people consider constructor as a part of Angular Life-cycle Hooks but keep in mind that constructor is a feature provided by class not by Angular, so these two are separate things, constructor is not a part of Angular Life-cycle Hooks.