Understanding Angular Life Cycle Hooks: A Comprehensive Guide

When working with Angular, it's essential to understand the lifecycle of a component. Angular provides several lifecycle hooks that allow you to tap into different phases of a component's existence, from creation to destruction. This blog will explore these lifecycle hooks, illustrating their use with code examples.

What Are Angular Life Cycle Hooks?

Lifecycle hooks are methods Angular calls during the various phases of a component's lifecycle. These hooks provide opportunities to execute custom logic at critical points in a component's existence. The primary lifecycle hooks in Angular are:

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

Let's dive into each of these hooks with code examples.

1. ngOnChanges

ngOnChanges is called before ngOnInit and whenever one or more data-bound input properties change. It receives a SimpleChanges object that contains the current and previous property values.

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-on-changes-example',
  template: `<p>{{ data }}</p>`
})
export class OnChangesExampleComponent implements OnChanges {
  @Input() data: string;

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges - data changed:', changes);
  }
}

2. ngOnInit

ngOnInit is called once, after the first ngOnChanges. It's typically used for component initialization and fetching data.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-on-init-example',
  template: `<p>ngOnInit example works!</p>`
})
export class OnInitExampleComponent implements OnInit {
  ngOnInit() {
    console.log('ngOnInit - component initialized');
  }
}

3. ngDoCheck

ngDoCheck is called during every change detection run, allowing you to implement your custom change detection.

import { Component, DoCheck } from '@angular/core';

@Component({
  selector: 'app-do-check-example',
  template: `<p>ngDoCheck example works!</p>`
})
export class DoCheckExampleComponent implements DoCheck {
  ngDoCheck() {
    console.log('ngDoCheck - custom change detection');
  }
}

4. ngAfterContentInit

ngAfterContentInit is called once after Angular projects external content into the component's view.

import { Component, AfterContentInit, ContentChild } from '@angular/core';

@Component({
  selector: 'app-after-content-init-example',
  template: `<ng-content></ng-content>`
})
export class AfterContentInitExampleComponent implements AfterContentInit {
  @ContentChild('projectedContent') content;

  ngAfterContentInit() {
    console.log('ngAfterContentInit - content initialized', this.content);
  }
}

5. ngAfterContentChecked

ngAfterContentChecked is called after every check of projected content.

import { Component, AfterContentChecked, ContentChild } from '@angular/core';

@Component({
  selector: 'app-after-content-checked-example',
  template: `<ng-content></ng-content>`
})
export class AfterContentCheckedExampleComponent implements AfterContentChecked {
  @ContentChild('projectedContent') content;

  ngAfterContentChecked() {
    console.log('ngAfterContentChecked - content checked', this.content);
  }
}

6. ngAfterViewInit

ngAfterViewInit is called once after the component's view and its child views have been initialized.

import { Component, AfterViewInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-after-view-init-example',
  template: `<p #viewChildElement>View Child</p>`
})
export class AfterViewInitExampleComponent implements AfterViewInit {
  @ViewChild('viewChildElement') viewChild;

  ngAfterViewInit() {
    console.log('ngAfterViewInit - view initialized', this.viewChild);
  }
}

7. ngAfterViewChecked

ngAfterViewChecked is called after every check of the component's view and its child views.

import { Component, AfterViewChecked, ViewChild } from '@angular/core';

@Component({
  selector: 'app-after-view-checked-example',
  template: `<p #viewChildElement>View Child</p>`
})
export class AfterViewCheckedExampleComponent implements AfterViewChecked {
  @ViewChild('viewChildElement') viewChild;

  ngAfterViewChecked() {
    console.log('ngAfterViewChecked - view checked', this.viewChild);
  }
}

8. ngOnDestroy

ngOnDestroy is called just before Angular destroys the component. This hook is typically used for cleanup, such as unsubscribing from observables and detaching event handlers.

import { Component, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-on-destroy-example',
  template: `<p>ngOnDestroy example works!</p>`
})
export class OnDestroyExampleComponent implements OnDestroy {
  ngOnDestroy() {
    console.log('ngOnDestroy - component destroyed');
  }
}

Conclusion

Understanding Angular's lifecycle hooks is crucial for building robust, efficient, and maintainable applications. These hooks provide precise control over component initialization, changes, and destruction, enabling you to implement custom logic at each stage of a component's lifecycle. By mastering these hooks, you can ensure that your Angular applications behave as expected and perform optimally.

Happy coding!

Exploring the Code

Visit the GitHub repository to explore the code in detail.

---