Component Lifecycle Hooks in Angular

Angular components have a lifecycle managed by Angular itself. This lifecycle includes different phases from creation to destruction. Angular provides lifecycle hooks that allow you to tap into these phases and perform actions when specific events occur. This tutorial covers the key lifecycle hooks and their usage.

What are Lifecycle Hooks?

Lifecycle hooks are methods that Angular calls at different stages of a component's lifecycle. These hooks give you visibility into key events, such as when the component is created, when it is updated, and when it is destroyed.

Key Lifecycle Hooks

Here are the key lifecycle hooks provided by Angular:

ngOnInit(): Called once the component is initialized.
ngOnChanges(): Called when any data-bound property of the component changes.
ngDoCheck(): Called during every change detection run.
ngAfterContentInit(): Called after Angular projects external content into the component's view.
ngAfterContentChecked(): Called after every check of projected content.
ngAfterViewInit(): Called after the component's view and child views have been initialized.
ngAfterViewChecked(): Called after every check of the component's view and child views.
ngOnDestroy(): Called just before the component is destroyed.

Using Lifecycle Hooks

To use a lifecycle hook, implement the corresponding interface and define the method in your component class. Here is an example of a component using several lifecycle hooks:

import { Component, OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-lifecycle-demo',
  template: `
    <p>Check the console for lifecycle hook logs.</p>
  `
})
export class LifecycleDemoComponent implements OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {
  constructor() {
    console.log('Constructor');
  }

  ngOnInit() {
    console.log('ngOnInit');
  }

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

  ngDoCheck() {
    console.log('ngDoCheck');
  }

  ngAfterContentInit() {
    console.log('ngAfterContentInit');
  }

  ngAfterContentChecked() {
    console.log('ngAfterContentChecked');
  }

  ngAfterViewInit() {
    console.log('ngAfterViewInit');
  }

  ngAfterViewChecked() {
    console.log('ngAfterViewChecked');
  }

  ngOnDestroy() {
    console.log('ngOnDestroy');
  }
}

Common Use Cases for Lifecycle Hooks

Here are some common use cases for lifecycle hooks:

ngOnInit(): Initialize data or set up subscriptions.
ngOnChanges(): Respond to input property changes.
ngDoCheck(): Implement custom change detection logic.
ngAfterContentInit(): Perform actions after content projection.
ngAfterViewInit(): Initialize logic that depends on the view or child views being fully initialized.
ngOnDestroy(): Clean up resources such as subscriptions or timers.

Conclusion

Component lifecycle hooks in Angular provide a powerful way to tap into different stages of a component's lifecycle. By using these hooks effectively, you can manage initialization, change detection, and cleanup tasks in your components. Happy coding!