Skip to main content

Lifecycle Hooks

Angular provides lifecycle hooks that give visibility into key life moments of components and directives. These hooks are a set of methods that can be implemented to tap into the lifecycle events of components or directives. They are crucial for performing tasks like initializing data, cleaning up resources, or reacting to changes.

Key Lifecycle Hooks​

  1. ngOnInit:--

    • Called once, after the first ngOnChanges.
    • Used for initializing data in a component.

  2. ngOnChanges:--

    • Called before ngOnInit and whenever one or more data-bound input properties change.
    • Receives a SimpleChanges object containing current and previous property values.
    • Useful for reacting to changes in input properties.

  3. ngDoCheck:--

    • Called with every change detection run, so it's executed frequently.
    • Useful for implementing custom change detection or behavior when Angular's default change detection isn't sufficient.

  4. ngAfterContentInit:--

    • Called once after the first ngDoCheck.
    • When component content (ng-content) has been initialized.

  5. ngAfterContentChecked:--

    • Called after ngAfterContentInit and every subsequent ngDoCheck.
    • Invoked each time the content of a component has been checked by Angular's change detection.

  6. ngAfterViewInit:--

    • Called once after the first ngAfterContentChecked.
    • When the component's views and child views are initialized.
    • Ideal for DOM manipulations and initializing data that requires the DOM elements to be present.

  7. ngAfterViewChecked:--

    • Called after the ngAfterViewInit and every subsequent ngAfterContentChecked.
    • Invoked every time the view of a component and its child views have been checked by Angular's change detection.

  8. ngOnDestroy:--

    • Called just before Angular destroys the directive or component.
    • Used for any custom cleanup that needs to occur when the instance is destroyed, such as unsubscribing from observables or detaching event handlers.

Usage Considerations​

  • Performance Impact:-- Frequent use of some hooks like ngDoCheck and ngAfterContentChecked can have performance implications since they are called often.
  • Change Detection:-- Understanding Angular's change detection strategy is important when working with lifecycle hooks, particularly those that are called frequently.
  • Memory Leaks:-- Be cautious with ngOnDestroy to release resources, unsubscribe from observables, and detach event handlers to prevent memory leaks.

Example​

Here's a simple example of using some lifecycle hooks in a component:

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

@Component({
  selector: 'app-example',
  template: `<p>{{ message }}</p>`
})
export class ExampleComponent implements OnInit, OnDestroy, OnChanges {
  @Input() message: string;

  constructor() { console.log('Constructor Called'); }

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

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

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

In this example, ngOnChanges logs changes to input properties, ngOnInit is used for initialization, and ngOnDestroy for cleanup activities.