Angular Component Lifecycle Hooks

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.

Component Lifecycle Hooks

ngOnInit

The ngOnInit hook is called after the component is created and the constructor has finished executing. This is where the component's properties are initialized. The ngOnInit hook is often used to make HTTP requests to fetch data from a server or to initialize other services.

Example:

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

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})

export class SampleComponent implements OnInit {
    ngOnInit() {
      // Perform initialization here 
    }
}

 

ngOnChanges

The ngOnChanges hook is called whenever a component's input properties change. This hook receives an object that contains the previous and current values of the input properties.

Example:

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

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})

export class SampleComponent implements OnChanges {
    ngOnChanges(changes: SimpleChanges) {
      // Respond to input property changes here 
    }
}

 

ngDoCheck

The ngDoCheck hook is called whenever Angular detects a change that is not detected by other lifecycle hooks. This hook is often used to detect changes to complex objects or to perform custom change detection logic.

Example:

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

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent implements DoCheck {
    ngDoCheck() {
      // Perform custom change detection here 
    }
}

 

ngOnDestroy

The ngOnDestroy hook is called when a component is about to be destroyed. This hook is often used to clean up resources or unsubscribe from observables.

Example:

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

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnDestroy {
  ngOnDestroy() {
    // Perform cleanup here 
  }
}

 

ngAfterContentInit

The ngAfterContentInit hook is called after Angular has projected external content into the component's view. This hook is often used to access child components or directives that have been projected into the component.

Example:

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

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent implements AfterContentInit {
  ngAfterContentInit() {
    // Access projected content here 
  }
}

 

ngAfterContentChecked

The ngAfterContentChecked hook is called after Angular has checked the projected content for changes. This hook is often used to perform custom change detection logic on the projected content.

Example:

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

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent implements AfterContentChecked {
  ngAfterContentChecked() {
    // Perform custom change detection on projected content here 
  }
}

 

ngAfterViewInit

The ngAfterViewInit hook is called after Angular has finished initializing the component's view. This hook is often used to access the component's DOM elements or to initialize third-party libraries that rely on the component's view.

Example:

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

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent implements AfterViewInit {
  ngAfterViewInit() {
    // Access DOM elements or initialize third-party libraries here 
  }
}

 

ngAfterViewChecked

The ngAfterViewChecked hook is called after Angular has checked the component's view for changes. This hook is often used to perform custom change detection logic on the component's view.

Example:

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

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent implements AfterViewChecked {
  ngAfterViewChecked() {
    // Perform custom change detection on the component's view here 
  }
}