Cory Rylan

My name is , Google Developer Expert, Speaker, Software Developer. Building Design Systems and Web Components.

Follow @coryrylan
Angular

Using NgOnDestroy with Services in Angular

Cory Rylan

-

Updated

This article has been updated to the latest version Angular 17 and tested with Angular 16. The content is likely still applicable for all Angular 2 + versions.

When an Angular component is destroyed, the ngOnDestroy life cycle method is called so we can clean up long-running tasks or unsubscribe from any RxJS Observables. Angular Services also have an ngOnDestroy method, just like Angular components. This lifecycle can be helpful when we create and destroy services that need to run some cleanup work when the component is destroyed.

Some services can have global event listeners or long-running tasks that, when no longer used, should be cleaned up. Angular Services typically are singletons by default but can be registered to create an instance per component.

import { Component } from '@angular/core';
import { LogService } from './log.service';

@Component({
  selector: 'app-hello',
  template: `hello there`,
  providers: [LogService]
})
export class HelloComponent {
 constructor(private log: LogService) { }
}

In our example, we have a component that uses a LogService. The LogService is registered to the component providers rather than the root provider or an NgModule. This allows the service to be created and destroyed per instance of our component.

In our LogService we have simulated task that logs every second to the console.

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

@Injectable()
export class LogService {
  count = 0;

  constructor() {
    console.log('constructor: logging starting...');
    setInterval(() => {
      console.log(this.count++);
    }, 1000);
  }
}

When the service is created the constructor creates an interval that will log every one second.

<button (click)="show = !show">toggle</button>

<app-hello *ngIf="show"></app-hello>

In our example, we toggle our component on the click of a button. When the component is shown the component is created as well as an instance of the LogService. When the component is removed, the component, as well as the LogService, is destroyed.

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

@Injectable()
export class LogService {
  interval: any;
  count = 0;

  constructor() {
    console.log('constructor: logging starting...');
    this.interval = setInterval(() => {
      console.log(this.count++);
    }, 1000);
  }

  ngOnDestroy() {
    console.log('ngOnDestroy: cleaning up...');
    clearInterval(this.interval);
  }
}

When our service is destroyed, the ngOnDestroy method is called in our service. When the method is called, we can clean up any long-running tasks such as our running interval. Leveraging ngOnDestroy in services can be useful for ensuring we clean up tasks in our application. Check out the full working demo below.

View Demo Code   
Twitter Facebook LinkedIn Email
 

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts

Angular

Creating Dynamic Tables in Angular

Learn how to easily create HTML tables in Angular from dynamic data sources.

Read Article
Web Components

Reusable Component Patterns - Default Slots

Learn about how to use default slots in Web Components for a more flexible API design.

Read Article
Web Components

Reusable Component Anti-Patterns - Semantic Obfuscation

Learn about UI Component API design and one of the common anti-patterns, Semantic Obfuscation.

Read Article