ngOnDestroy for cleanup in Angular - Mini Project: Build & Apply

Using ngOnDestroy for Cleanup in Angular

📖 Scenario: You are building a simple Angular component that starts a timer when it loads. To keep your app clean and avoid memory leaks, you need to stop the timer when the component is destroyed.

🎯 Goal: Create an Angular standalone component that starts a timer counting seconds on load and properly cleans up the timer using ngOnDestroy when the component is removed.

📋 What You'll Learn

Create a standalone Angular component named TimerComponent

Add a variable seconds initialized to 0

Start a timer using setInterval that increments seconds every second

Store the timer ID in a variable called timerId

Implement the ngOnDestroy lifecycle method to clear the timer using clearInterval(timerId)

💡 Why This Matters

🌍 Real World

Timers are common in apps for clocks, countdowns, or refreshing data. Cleaning up timers prevents app slowdowns and bugs.

💼 Career

Understanding Angular lifecycle hooks like ngOnDestroy is essential for building efficient, bug-free Angular applications.

1

Create the TimerComponent with seconds variable

Create a standalone Angular component named TimerComponent with a public variable seconds initialized to 0.

Angular

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

@Component({
  selector: 'app-timer',
  standalone: true,
  template: `Seconds: {{ seconds }}`
})
export class TimerComponent {
  // Your code here
}

Need a hint?

Use public seconds = 0; inside the class to create the variable.

2

Add timerId variable to store the interval ID

Add a public variable called timerId of type any to store the ID returned by setInterval.

Angular

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

@Component({
  selector: 'app-timer',
  standalone: true,
  template: `Seconds: {{ seconds }}`
})
export class TimerComponent {
  public seconds = 0;
  // Add timerId variable here
}

Need a hint?

Declare public timerId: any; inside the class.

3

Start the timer in the constructor to increment seconds

In the constructor of TimerComponent, start a timer using setInterval that increments seconds by 1 every 1000 milliseconds. Assign the returned ID to timerId.

Angular

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

@Component({
  selector: 'app-timer',
  standalone: true,
  template: `Seconds: {{ seconds }}`
})
export class TimerComponent {
  public seconds = 0;
  public timerId: any;

  // Start timer in constructor
}

Need a hint?

Use setInterval(() => { this.seconds++ }, 1000) inside the constructor and assign it to this.timerId.

4

Implement ngOnDestroy to clear the timer

Implement the ngOnDestroy lifecycle method in TimerComponent that calls clearInterval(this.timerId) to stop the timer when the component is destroyed.

Angular

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

@Component({
  selector: 'app-timer',
  standalone: true,
  template: `Seconds: {{ seconds }}`
})
export class TimerComponent {
  public seconds = 0;
  public timerId: any;

  constructor() {
    this.timerId = setInterval(() => {
      this.seconds++;
    }, 1000);
  }

  // Add ngOnDestroy method here
}

Need a hint?

Import OnDestroy and implement ngOnDestroy() to call clearInterval(this.timerId).