Component Life Cycle Hooks in Angular

In this tutorial, we learn how to use Angular lifecycle hooks. The life cycle hooks are the methods that angular invokes on directives and components as it creates, changes, and destroys them. Using life-cycle hooks we can fine-tune the behaviour of our components during creation, update, and destruction.

What is Angular Component lifecycle hooks

When the angular application starts it creates and renders the root component. It then creates and renders it’s Children. For each loaded component, it checks when its data bound properties change and updates them. It destroys the component and removes it from the DOM when no longer in use.

Angular lets us know when these events happen using lifecycle hooks

The Angular life cycle hooks are nothing but callback function, which angular invokes when a certain event occurs during the component’s life cycle.

For example

  • When component is initialized, Angular invokes ngOnInit
  • When a component’s input properties change, Angular invokes ngOnChanges
  • When a component is destroyed, Angular invokes ngOnDestroy

Angular lifecycle hooks

Here is the complete list of life cycle hooks provided by the Angular

  • ngOnChanges
  • ngOnInit
  • ngDoCheck
  • ngAfterContentInit
  • ngAfterContentChecked
  • ngAfterViewInit
  • ngAfterViewChecked
  • ngOnDestroy

Each hook defined above is invoked by Angular when certain events occur.

ngOnChanges

The Angular invokes this life cycle hook whenever any data-bound property of the component or directive changes.

The parent component can communicate with the child component, if child component exposes a property decorated with @Input decorator. This hook is invoked in the child component, when the parent changes the Input properties. We use this to find out details about which input properties have changed and how they have changed.

We used this life cycle hook in tutorial Passing data to child component.

ngOnInit

This hook is called when the component is created for the first time. This hook is called after the constructor and first ngOnChanges hook.

This is a perfect place where you want to add any initialisation 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.

ngDoCheck

This event is called immediately after the ngOnInit. There after it is called on every change made to the component properties,  When ever the event is raised or any operations that may result in change in value of properties.

Basically This hook is executed for every change detection in cycles even there is no properties change

The Angular ngOnChanges hook does not detect all the changes made to the input properties. It Only detects when the Input Property is a primitive type or  reference to the Input property changes

This hook is provided so as to Implement custom change detection, whenever Angular fails to detect the changes made to Input properties

ngAfterContentInit

This Life cycle hook is called after the Component’s content has been fully initialized. This hook is called after the properties marked with ContentChild and ContentChildren are fully initialized

The Angular Component can include the external content from the child Components by transcluding them using the <ng-content></ng-content> element. This hook is fired after these projected contents are initialized

This is a component only hook and Called Only once.

ngAfterContentChecked

This life cycle hook is called after the Components Content is checked by the Angular’s Change detection module. It is called immediately after ngAfterContentInit and after every subsequent ngDoCheck().

This is a component only hook

ngAfterViewInit

Similar to ngAfterContentInit, but invoked after Angular initializes the component’s views and all its child views.  This is  Called once after the first ngAfterContentChecked.

A component-only hook.

ngAfterViewChecked

The Angular fires this hook after it checks the component’s views and child views. This event is fired after the ngAfterViewInit and after that for every subsequent ngAfterContentChecked hook.

This is a component only hook.

ngOnDestroy

This hook is called just before the Component/Directive instance is destroyed by Angular

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

How to Use Lifecycle Hooks

  1. Import Hook interfaces
  2. Declare that Component/directive Implements lifecycle hook interface
  3. Create the hook method (e.g. ngOnOnChanges)

Let us build a simple component, which implements the ngOnInit hook

Create a Angular Project using Angular Cli. Open the app.component.ts

Import Hook interfaces

Import hook interfaces from the core module. The name of the Interface is hook name without ng. For example interface of ngOnInit hook is OnInit

Declare that Component/directive Implements lifecycle hook interface

Next, define the AppComponent to implement OnInit interface

Create the hook method (e.g. ngOnOnChanges)

The life cycle hook methods must use the same name as the hook.

The complete code for the app.component.ts.

Now, run the code and open the developer console. you will see the following

Note that the constructor event is fired before the OnInit hook.

The Order of Execution of Life Cycle Hooks

The Angular hooks are executed in this order:

When the Component is Created

  1. OnChanges
  2. OnInit
  3. DoCheck
  4. AfterContentInit
  5. AfterContentChecked
  6. AfterViewInit
  7. AfterViewChecked

When the Component with Child Component is created

  1. OnChanges
  2. OnInit
  3. DoCheck
  4. AfterContentInit
  5. AfterContentChecked
    1. Child Component -> OnChanges
    2. Child Component -> OnInit
    3. Child Component -> DoCheck
    4. Child Component -> AfterContentInit
    5. Child Component -> AfterContentChecked
    6. Child Component -> AfterViewInit
    7. Child Component -> AfterViewChecked
  6. AfterViewInit
  7. AfterViewChecked

After The Component is Created

  1. OnChanges
  2. DoCheck
  3. AfterContentChecked
  4. AfterViewChecked

The OnChanges hook is fired only if there is a input property defined in the component and it changes. Otherwise it will never fire

Verifying the Order of Execution

You can verify the Order of execution by building a simple application

Parent Component

Update the app.component.ts with following code

  • We are listening to all the hooks.
  • Child Component can be added/removed using the ngIf directive.
  • We are passing data to child component by binding to @Input property of the child component

Child Component

  • We are listening to all the hooks
  • @Input property message is defined

Run the code and check the developer console for the log messages

Conclusion

We learned about Component life cycle hooks in Angular.  The Angular generates following hooks OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked & OnDestroy. We then learned how to build an Application using OnInit life cycle hook. Finally, we looked at the Order of execution of these life cycle hooks

4 thoughts on “Component Life Cycle Hooks in Angular”

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