ngOnInit vs ngOnDestroy

When we are working with Angular 17+ then two important lifecycle hooks you will frequently use are ngOnInit and ngOnDestroy.

What are Angular Lifecycle Hooks?

Angular components go through a series of stages from when it’s created until it’s destroyed. These stages are known as lifecycle hooks.
Two of the most commonly used hooks are:

  1. ngOnInit – When the component is initialized.
  2. ngOnDestroy – When the component is destroyed.

What is ngOnInit?

ngOnInit() is a lifecycle hook that executes after Angular initializes the component and sets all input properties.

When does ngOnInit run?

I will explain it through the steps:

  1. Runs once, after the component is created.
  2. Runs after the constructor.
  3. Runs after all @Input() bindings are set.

Example for ngOnInit: 


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

@Component({
  selector: 'app-user',
  standalone: true,
  template: `
{{ message }}
`
})
export class UserComponent implements OnInit {

  message = '';

  ngOnInit() {
    this.message = 'Component Initialized!';
    console.log('ngOnInit called');
  }
}

What is ngOnDestroy?

ngOnDestroy() is a lifecycle hook that executes just before Angular destroys the component.

When does ngOnDestroy run?

Runs once, right before the component is removed from the DOM.

Example of ngOnDestroy


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

@Component({
  selector: 'app-timer',
  template: `
Timer Running...
`
})
export class TimerComponent implements OnDestroy {

  intervalId: any;

  constructor() {
    this.intervalId = setInterval(() => {
      console.log('Timer running...');
    }, 1000);
  }

  ngOnDestroy() {
    clearInterval(this.intervalId);
    console.log('ngOnDestroy called. Timer stopped.');
  }
}

Difference Between ngOnInit vs ngOnDestroy

Feature ngOnInit ngOnDestroy
Purpose Initialization logic Cleanup logic
Execution Time After component creation Before component destruction
Runs Once Once
Best For API calls, subscriptions, default values Unsubscribe, clear timers, remove listeners
Access @Input()? ✔ Yes ❌ No need
Recommended? ✔ Yes ✔ Yes (prevents memory leaks)

ngOnInit vs ngOnDestroy – Interview Questions

Q 1: What is ngOnInit?

Ans: ngOnInit is called once after component initialization. It is used to load data and run initialization logic

Q 2: What is ngOnDestroy?

Ans: ngOnDestroy is called before a component is removed. It is used to clean up resources like subscriptions and timers.

Q 3: When should ngOnInit be used instead of constructor?

Ans: Use ngOnInit for data loading and initialization because component inputs are available at this stage.

Q 4: Why is ngOnDestroy important?

Ans: It prevents memory leaks by stopping subscriptions, intervals, and event listeners.

Q 5: Can both hooks be used in one component?

Ans: Yes, ngOnInit handles setup, while ngOnDestroy handles cleanup.

ngOnInit vs ngOnDestroy – Objective Questions (MCQs)

Q1. ngOnInit() runs when:





Q2. ngOnDestroy() runs when:





Q3. ngOnDestroy() is used for:





Q4. ngOnInit is executed:





Q5. ngOnDestroy is useful to: