Using NgOnDestroy with Services in Angular

Hello Guyz! in this blog we will see how we can use NgOnDestroy with Services in Angular.When we destroy an Angular component, the ngOnDestroy life cycle method is called. so we can clean up long-running tasks or unsubscribe from any RxJS Observables. Like same angular services also have an ngOnDestroy method, just like Angular components. This lifecycle can be helpful for us.when we create and destroy services that need to run some cleanup work when the component is destroy.

NgOnDestroy with Services in Angular

Some Angular services can have global event listeners or long-running tasks that, when no longer used, should be cleaned up. Angular Services typically are based on singletons architecture 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.