Using NgOnDestroy with Services in Angular

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