Angular - Component Lifecycle

Angular component goes through a series of stages/events during its existence. Before moving further in the journey of learning Angular, it is necessary to understand how a component interacts with the framework and the DOM throughout its existence.

When an angular component is constructed, it first goes through the change detection phase, where it checks whether there are any changes in the input and then acts accordingly. Then, the initialization phase kicks on and continues to other phases and finally gets destroyed in the destruction phase.

Component Lifecycle Phases in Angular

The different stages of the Angular Components Lifecycle are as follows −

• Creation: It is the first phase where a component is instantiated.

• Change Detection: Then, Angular try to detect changes in the View and Content of the application.

• Rendering: After change detection, the new template is updated.

• Destruction: The Component is destroyed at the end.

Component Lifecycle Hook in Angular

Each phase of the angular component is associated with a lifecycle hook interface which can be implemented to perform arbitrary action in that particular phase. Generally, the lifecycle hooks refer to the methods of lifecycle hook interfaces. Let's see the phases, their sequence and the corresponding hooks.

Execution Order of Component Lifecyle Hooks

Let us see the lifecycle sequence of an arbitrary component/directive through its hooks.

• ngOnChanges
• ngOnInit
• ngDoCheck
• ngAfterContentInit
• ngAfterContentChecked
• ngAfterViewInit
• ngAfterViewChecked
• ngOnChanges
• ngDocheck
• ngAfterContentChecked
• ngAfterViewchecked
• Repeation of Step 8 - 11 until destruction
• ngOnDestroy

Example

Let us create a new component, MyLifecycleComponent, wire up all hooks and check the sequence of the lifecylce using console output.

Step 1: Create a new component using angular CLI as shown below −

 ng generate component my-lifecycle-sample 

This will create a new component and its related template and styles as shown below.

 $ ng generate component my-lifecycle-sample CREATE src/app/my-lifecycle-sample/my-lifecycle-sample.component.css (0 bytes) CREATE src/app/my-lifecycle-sample/my-lifecycle-sample.component.html (34 bytes) CREATE src/app/my-lifecycle-sample/my-lifecycle-sample.component.spec.ts (638 bytes) CREATE src/app/my-lifecycle-sample/my-lifecycle-sample.component.ts (252 bytes) 

Step 2: Add all lifecycle hooks into the component and log messages:

 import { Component, OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy } from '@angular/core'; @Component({ selector: 'app-my-lifecycle-sample', templateUrl: './my-lifecycle-sample.component.html', styleUrls: ['./my-lifecycle-sample.component.css'] }) export class MyLifecycleSampleComponent implements OnChanges, OnInit { ngOnChanges() { console.log("Change detection") } ngOnInit() { console.log("Initialization of component / directive") } ngDoCheck() { console.log("Custom change detection") } ngAfterContentInit() { console.log("Content initialization") } ngAfterContentChecked() { console.log("Checking changes in content") } ngAfterViewInit() { console.log("View initialization") } ngAfterViewChecked() { console.log("Checking changes in views") } ngOnDestroy() { console.log("Destruction of component / directive") } } 

Step 3: Add the component in the app components template app.component.html.

 <app-my-lifecycle-sample> </app-my-lifecycle-sample> <router-outlet></router-outlet> 

Run the application using ng serve and test the console through developer tool in the browser. It will show all the lifecycle events executing in the above discussed order.

Multiple Choice Questions on Angular Component Lifecycle

In this section, test your understanding of the angular component lifecycle by giving correct answers to the questions given below −