Angular Lifecycle Hooks

Angular is a powerful framework for building web applications, and it includes a variety of lifecycle hooks that allow developers to respond to different events in the life cycle of a component. These lifecycle hooks provide a way for developers to write code that runs at specific times during the component's creation, rendering, and destruction. In this article, we will explore Angular's lifecycle hooks in detail and provide examples of how to use them.

Angular has eight lifecycle hooks, which can be divided into two categories: component lifecycle hooks and directive lifecycle hooks. The component lifecycle hooks are called when a component is created, rendered, and destroyed. The directive lifecycle hooks are called when a directive is applied to an element, updated, or destroyed.

ngOnInit():

This hook is called after the component has been initialized and the constructor has finished. It is used to perform any setup tasks that need to be done before the component is displayed. For example, you could use ngOnInit to fetch data from an API and update the component's properties.

ngOnChanges():

This hook is called whenever a component's input properties change. It provides the developer with a way to respond to changes in the data and update the component accordingly. For example, you could use ngOnChanges to update a list of items when a new item is added or removed.

ngDoCheck():

This hook is called whenever Angular detects changes to the component or its children. It is used to perform custom change detection and update the component's state accordingly. For example, you could use ngDoCheck to update a progress bar as a long-running process completes.

ngOnDestroy():

This hook is called just before the component is destroyed. It is used to perform any cleanup tasks that need to be done before the component is removed from the DOM. For example, you could use ngOnDestroy to unsubscribe from any observables that the component is using.

ngAfterContentInit():

This hook is called once after the content of a component or directive has been initialized. It is used to perform initialization logic that relies on the content of the component or directive.

ngAfterContentChecked():

This hook is called after every change detection cycle, after the content of a component or directive has been checked. It is used to perform logic that relies on the content of the component or directive.

ngAfterViewInit():

This hook is called once after the view of a component or directive has been initialized. It is used to perform initialization logic that relies on the view of the component or directive.

ngAfterViewChecked():

This hook is called after every change detection cycle, after the view of a component or directive has been checked. It is used to perform logic that relies on the view of the component or directive.

Here is an example of how these hooks can be used in an Angular component:

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

@Component({
  selector: 'app-my-component',
  template: ` <h1>{{ title }}</h1> <ul> <li *ngFor="let item of items">{{ item }}</li> </ul> `
})

export class MyComponent implements OnInit, OnChanges, OnDestroy, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked {
  title = 'My Component';
  items = ['Item 1', 'Item 2', 'Item 3'];

  ngOnInit() {
    console.log('MyComponent: ngOnInit');
    // Perform any setup tasks here 
  }
  
  ngOnChanges() {
    console.log('MyComponent: ngOnChanges');
    // Respond to changes in input properties here 
  }
  
  ngDoCheck() {
    console.log('MyComponent: ngDoCheck');
    // Perform custom change detection here 
  }
  
  ngOnDestroy() {
    console.log('MyComponent: ngOnDestroy');
    // Perform any cleanup tasks here 
  }
  
  ngAfterViewChecked() {
    // Perform custom change detection on the component's view here
  }

  ngAfterViewInit() {
    // Access DOM elements or initialize third-party libraries here
  }

  ngAfterContentChecked() {
    // Perform custom change detection on projected content here
  }

  ngAfterContentInit() {
    // Access projected content here
  }

} 

In this example, the MyComponent class implements the all lifecycle hooks. These hooks are used to perform setup tasks, respond to changes in input properties, perform custom change detection, and perform cleanup tasks. By using these hooks, developers can create more robust and responsive Angular components.

These hooks provide a way to perform initialization, cleanup, and other types of logic at specific points in the lifecycle of an Angular element. It's important to use these hooks carefully, as they can have performance implications if used improperly. By understanding these hooks and their purpose, you can build more efficient and effective Angular applications.