Every component/directive in Angular has a lifecycle; it goes through a number of different phases from its creation, to updating, to destroy. We can hook into those different phases to get some pretty fine-grained control of our application.

To do this, we add some specific methods to our component class that get called during each of these lifecycle phases. We call those methods hooks.

These hooks are executed in the following sequence.

After creating a component/directive by calling its constructor, Angular calls the lifecycle hooks in the following order at a specific time.

S.No.Lifecycle Hook Description
1ngOnChangesCalled after bound input properties changes
2ngOnInitCalled once the component is initialized
3ngDoCheckCalled during every change detection run
4ngAfterContentInitCalled after a content (ng-content) has been projected into view
5ngAfterContentCheckCalled every time the projected content has been checked
6ngAfterViewInitCalled after the component’s view and child views has been initialized
7ngAfterViewCheckCalled after the component’s view and child views has been checked
8ngOnDestroyCalled once the component is about to destroy

Lifecycle Hooks in Action

Let's take an example.

I have appComponent and it has an array, say ‘hooksArray’. It contains one object which is added to the constructor.
Now, we are going to loop on hooksArray and add child component (say LifeCycleHookComponent component) into it. AppComponent has a destroy button, on the click of which we are removing components from the hookArray.
Hence, the child component (i.e. LifeCycleHookComponent) is going to be unloaded from app component.

Here is the code for AppComponent.ts.

  1. import { Component } from '@angular/core';
  3. @Component({
  4. selector: 'app-root',
  5. templateUrl: './app.component.html',
  6. styleUrls: ['./app.component.css']
  7. })
  8. export class AppComponent {
  9. hooksArray = [];
  10. title = 'app';
  12. constructor(){
  13. this.hooksArray.push({'Name': 'TestHook'});
  14. }
  16. OnDestroy(){
  17. this.hooksArray.splice(0,1);
  18. }
  19. }

AppComponent.html

  1. <div class="container">
  2. <div class="row">
  3. <div class="col-xs-12">
  4. <app-life-cycle-hook *ngFor="let hook of hooksArray">
  5. <p>{{hook.name}}</p>
  6. </app-life-cycle-hook>
  7. <br>
  8. <button class='btn btn-primary' (click)="OnDestroy()">Destroy</button>
  9. </div>
  10. </div>
  11. </div>

LifeCycleHookComponent.ts

  1. import {
  2. Component,
  3. OnInit,
  4. OnChanges,
  5. DoCheck,
  6. AfterContentInit,
  7. AfterContentChecked,
  8. AfterViewInit,
  9. AfterViewChecked,
  10. OnDestroy }
  11. from '@angular/core';
  13. @Component({
  14. selector: 'app-life-cycle-hook',
  15. templateUrl: './life-cycle-hook.component.html',
  16. styleUrls: ['./life-cycle-hook.component.css']
  17. })
  18. export class LifeCycleHookComponent implements
  19. OnInit
  20. ,OnChanges
  21. ,DoCheck
  22. ,AfterContentInit
  23. ,AfterContentChecked
  24. ,AfterViewInit
  25. ,AfterViewChecked
  26. ,OnDestroy
  27. {
  29. name: string ='';
  31. constructor() {
  32. console.log('Constructor Called');
  33. }
  35. ngOnInit() {
  36. console.log('ngOnInit Called');
  37. }
  39. ngOnChanges(){
  40. console.log('ngOnChanges Called');
  41. }
  43. ngDoCheck(){
  44. console.log('ngOnDoCheck Called');
  45. }
  47. ngAfterContentInit(){
  48. console.log('ngAfterContentInit Called');
  49. }
  51. ngAfterContentChecked(){
  52. console.log('ngAfterContentChecked Called');
  53. }
  55. ngAfterViewInit(){
  56. console.log('ngAfterViewInit Called');
  57. }
  59. ngAfterViewChecked(){
  60. console.log('ngAfterViewChecked Called');
  61. }
  63. ngOnDestroy(){
  64. console.log('ngOnDestroy Called');
  65. }
  66. }

LifeCycleHookComponent.HTML

  1. <h1>Life Cycle Hooks Example</h1>
  3. <br>
  4. <input type="text" class="forms-contrl" [(ngModel)]="name">
  5. <p>{{name}}</p>

Here is the output.

Angular

Given below is the list of different life cycle hooks in Chrome console log.

Angular

Now, click on the Destroy button. The child is destroyed as shown below.

Angular

OnDestroy is captured after clicking OnDestroy button.

Angular

That's it. I hope it will be helpful for you.