Angular Lifecycle Hooks: A High Level Overview

#angular #typescript #tutorial #javascript

In Angular there are a number of lifecycle hooks (methods) that can be invoked at various points in a component lifecycle. The definitions of these hooks can be inferred from the names themselves. It is more important to be aware of the context in which these hooks are called.

Lifecycle hooks in order of invocation with definitions.

constructor: not typically thought of as a hook but it is invoked during the lifecycle
ngOnChanges: called when Angular sets or resets data-bound input properties.
ngOnInit: invoked after the data-bound properties of a directive are initialized.
ngDoCheck: allows you to implement your custom change-detection algorithms for any changes that Angular won’t or can’t detect. This hook is called frequently, so any operation inside this hook must be fast and efficient to avoid impeding performance.
ngAfterContentInit: called after Angular completes the first content check cycle and has projected the external content into the component’s view.
ngAfterContentChecked: called after Angular checks the content projected into the component.
ngAfterViewInit: invoked when the component’s views and child views have been fully initialized.
ngAfterViewChecked: called after Angular performs change detection on a component’s view and child views.
ngOnDestroy: called just before Angular destroys the component. This is where one cleans up any open connections, unsubscribes from observables, and detaches event handlers to prevent memory leaks.

Some additional imagery to help illustrate this point

Our demo typescript file with the hooks. I am using Angular 18, therefore I no longer have to import the hooks or implement interfaces such as OnInit. However, if you are using an earlier version of Angular you may have to perform these additional steps.



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

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [],
  templateUrl: './demo.component.html',
  styleUrl: './demo.component.css'
})
export class DemoComponent {

  @Input('title') titleString: string  = '';

  constructor(){
    console.log('constructor called');
  }

  ngOnChanges(){
    console.log('ngOnChanges called');
  }

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

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

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

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

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

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

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

}

Hooks are called after initialization of components. Note that on initialization of a component all hooks are called except ngOnDestroy. Methods like ngOnInit, ngAfterContentInit, and ngAfterViewInit are called once during the component lifecycle.

The hook ngOnDestroy is called just before destruction of a component. Note the absence of the Demo component.

The hooks ngOnChanges, ngDoCheck, ngAfterContentChecked, and ngAfterViewChecked are called whenever there is a change in state (the value of the input variable changes).

In practice the hooks that that are most commonly used are ngOnInit (most common), ngOnChanges, ngOnDestroy, and ngAfterViewInit. Please feel free to weigh in if you can think of interesting ways to use the other hooks. Now you have the hook up. Thank you.