Angular Components' Lifecycle

Introduction

Component’s lifecycle is the sequence of steps that happen between the component’s creation and its destruction. You can implement lifecycle hooks to run code during these steps.

Lifecycle Methods

Angular walks your application tree from top to bottom, checking template bindings for changes.

Phase	Method	Summary
Creation	constructor	Standard JavaScript class constructor. Runs when Angular instantiates the component.
Change Detection	ngOnInit	Runs once after Angular has initialized all the component’s inputs.
	ngOnChanges	Runs every time the component’s inputs have changed.
	ngDoCheck	Runs every time this component is checked for changes.
	ngAfterContentInit	Runs once after the component’s content has been initialized.
	ngAfterContentChecked	Runs every time this component content has been checked for changes.
	ngAfterViewInit	Runs once after the component’s view has been initialized.
	ngAfterViewChecked	Runs every time the component’s view has been checked for changes.
Rendering	afterNextRender	Runs once the next time that all components have been rendered to the DOM.
	afterEveryRender	Runs every time all components have been rendered to the DOM.
Destruction	ngOnDestroy	Runs once before the component is destroyed.

ngOnInit

ngOnInit method:

• runs after Angular has initialized all the components inputs with their initial values,
• runs exactly once.

This step happens before the component’s own template is initialized. This means that you can update the component’s state based on its initial input values.

ngOnChanges

ngOnChanges method runs after any component inputs have changed.

This step happens before the component’s own template is checked: you can update the component’s state based on its initial input values.

During initialization, the first ngOnChanges runs before ngOnInit.

Inspecting changes

ngOnChanges method accepts one argument of type SimpleChanges.

This object is a Record mapping each component input name to a SimpleChange object. Each SimpleChange contains:

1. input’s previous value,
2. input’s current value,
3. a flag for whether this is the first time the input has changed.

If you provide an alias for any input properties, SimpleChanges still uses the TypeScript property name as a key, rather than the alias.

app.ts

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

@Component({/*...*/})
export class App {
  name = input('');

  ngOnChanges(changes: SimpleChanges<App>) {
    if (changes.name) {
      console.log(`Previous: ${changes.name.previousValue}`);
      console.log(`Current: ${changes.name.currentValue}`);
      console.log(`Is first ${changes.name.firstChange}`);
    }
  }
}

ngOnDestroy

ngOnDestroy method runs once just before a component is destroyed. Angular destroys a component when it is no longer shown on the page (such as being hidden by @if or upon navigating to another page).

DestroyRef

Instead of using ngOnDestroy method, you can inject an instance of DestroyRef.

You can register a callback to be invoked upon the component’s destruction by calling onDestroy method of DestroyRef.

app.ts

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

@Component({/*...*/})
export class App {
  constructor() {
    inject(DestroyRef).onDestroy(() => {
      console.log('App destruction');
    });
  }
}

You can pass DestroyRef instance to functions or classes outside your component. Use this pattern if you have other code that should run some cleanup behavior when the component is destroyed.

---

DestroyRef provides a destroyed property that allows checking whether a given instance has already been destroyed. This is useful for avoiding operations on destroyed components, especially when dealing with delayed or asynchronous logic.

By checking destroyRef.destroyed, you can prevent executing code after the instance has been cleaned up, avoiding potential errors such as NG0911: View has already been destroyed..

ngDoCheck

ngDoCheck method runs before Angular checks a component’s template for changes (every time).

This method runs very frequently: it can impact your page’s performance.

You can use this lifecycle hook to manually check for state changes outside of Angular’s normal change detection, manually updating the component’s state.

During initialization, the first ngDoCheck runs after ngOnInit.

ngAfterContentInit

ngAfterContentInit method runs once after all the children nested inside the component (its content) have been initialized.

You can use this lifecycle hook to read the results of content queries. While you can access the initialized state of these queries, attempting to change any state in this method results in an NG0100 error.

ngAfterContentChecked

ngAfterContentChecked method runs every time the children nested inside the component (its content) have been checked for changes.

This method runs very frequently and can significantly impact your page’s performance. Avoid defining this hook whenever possible, only using it when you have no alternative.

While you can access the updated state of content queries here, attempting to change any state in this method results in an NG0100 error.

ngAfterViewInit

ngAfterViewInit method runs once after all the children in the component’s template (its view) have been initialized.

You can use this lifecycle hook to read the results of . While you can access the initialized state of view queries here, attempting to change any state in this method results in an NG0100 error.

ngAfterViewChecked

ngAfterViewChecked method runs every time the children in the component’s template (its view) have been checked for changes.

This method runs very frequently and can significantly impact your page’s performance. Avoid defining this hook whenever possible, only using it when you have no alternative.

While you can access the updated state of view queries here, attempting to change any state in this method results in an NG0100 error.

afterEveryRender and afterNextRender

afterEveryRender and afterNextRender functions let you register a render callback to be invoked after Angular has finished rendering all components on the page into the DOM.

Rather than a class method, they are standalone functions that accept a callback. The execution of render callbacks are not tied to any specific component instance, but instead an application-wide hook.

afterEveryRender and afterNextRender must be called in an injection context, typically a component’s constructor.

You can use render callbacks to perform manual DOM operations. See Using DOM APIs for guidance on working with the DOM in Angular.

Render callbacks do not run during server-side rendering or during build-time pre-rendering.

Lifecycle interfaces

Angular provides a TypeScript interface for each lifecycle method. You can optionally import and implement these interfaces to ensure that your implementation does not have any typos or misspellings.

Each interface has the same name as the corresponding method without the ng prefix. For example, the interface for ngOnInit is OnInit.

app.ts

import { Component, input, onChanges, SimpleChanges } from '@angular/core';

@Component({/*...*/})
export class App implements OnChanges {
  name = input('');

  ngOnChanges(changes: SimpleChanges<App>) {
    if (changes.name) {
      console.log(`Previous: ${changes.name.previousValue}`);
      console.log(`Current: ${changes.name.currentValue}`);
      console.log(`Is first ${changes.name.firstChange}`);
    }
  }
}

Execution order

The following diagrams show the execution order of Angular’s lifecycle hooks.

Initialization

Subsequent Updates