Angular ngOnInit And ngOnDestroy Life Cycle hook

In this tutorial, we will be learning how Angular ngOnInit and ngOnDestroy life cycle Hooks work. We learned about the Angular lifecycle hooks in the Previous tutorial. In This chapter let us learn ngOnInit and ngOnDestroy hooks

ngOnInit

The ngOnInit or OnInit hook is called when the component is created for the first time. This hook is called after the constructor and first ngOnChanges hook is fired.

This is a perfect place where you want to add any initialization logic for your component.

Note that ngOnChanges hook is fired before ngOnInit. Which means all the input properties are available to use when the ngOnInit is hook is called

This hook is fired only once

This hook is fired before any of the child directive properties are initialized.

ngOnDestroy

The ngOnDestroy or OnDestroy hook is called just before the Component/Directive instance is destroyed by Angular

Use this hook to Perform any cleanup logic for the Component. This is the correct place where you would like to Unsubscribe Observables and detach event handlers to avoid memory leaks.

Example of ngOnInit

Let us build a Component that illustrates the use on OnInit and OnDestroy hook

Let us build a Child component, which is conditionally displayed or destroyed based on flag from the Parent Component

Child Component

Create the child.component.ts

First Import the OnDestroy and OnInit from the angular/core library

The Component template just displays the title “Child Component”

Declare child Component implements OnInint and OnDestroy Hooks

Add the constructor and add to log when the constructor is called

Finally. Create the hook method. The method writes to the console log

The complete code for child component

Parent Component

Here’s how our App Component looks like

Note that the parent template

We have used *ngIf directive, which hides/shows the child component based on the displaychild value. The toggle function toggle the status of the displaychild.

We have added OnInit and OnDestroy hook to parent component also.

Run the Code

When you run the code for the first time you will see the following in the console window

Click on the toggle button. The Child Component is destroyed and you will see the following logs

Click on the toggle button again. The Child Component is created again and you will see that the constructor of the child component is called again and then the OnInit is invoked

The above code demonstrates how the OnInit & OnDestroy works

Difference Between Constructor and ngOnInit

The Constructor is executed when the class is instantiated. It has nothing do with the angular. It is the feature of Javascript and Angular does not have the control over it

The ngOnInit is Angular specific and is called when the Angular has initialized the component with all its input properties

The @Input properties are available under the ngOnInit lifecycle hook. This will help you to do some initialization stuff like getting data from the back-end server etc to display in the view

@Input properties are shows up as undefined inside the constructor

Conclusion

OnInit Hook is useful for Initialising the Component like getting data from back-end server, while OnDestroy hook must be used to perform clean-up operation in the Component.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top