angular5 rxjs timer (with pause & restart) cannot unsubscribe when routing to different route/component

Issue

I have a component which subcsribes to a service below:

@Injectable()
export class DataService {

  ons$ = new Subject();
  offs$ = new  Subject();
  timerstate: Subscription;
  sendData$ = new Subject();

  getDataWithTimer(id: number ,workorderid: number): Observable<EquipmentResponse> {
    return timer(0, 5000).pipe(
      switchMap(() => this.getData(id,workorderid)),
      takeUntil(this.ons$),
      repeatWhen(() => this.offs$)
    )
  }

 getData(id: number, workorderid: number): Observable<EquipmentResponse> {
    return this.serverConnectionService.get(`/api/equipment/${id}?userid=${getCurrentUser()}&workorderid=${workorderid}`)
    .catch(this.handleError);
  }

  startDataTimer(id: number ,workorderid: number) {
    this.timerstate = this.getDataWithTimer(id,workorderid).subscribe(
      resp => {
        this.sendData$.next(resp);
      }
    )
  }

  stopDataTimer() {
      this.timerstate.unsubscribe();
  }

  pauseTimer() {
    this.ons$.next();
  }

  resumeTimer() {
     this.offs$.next();
  }


}

In the component that uses the service I doing

ngOnInit() {
   
    this.DataService.DataTimer(781, 5060);
    this.DataService.sendData$.subscribe( resp => console.log(resp));  
  }

in the HTML i have two buttons one for PAUSE & one for RESUME . PAUSE is this.DataService.pauseTimer() & RESUME is this.DataService.resumeTimer() . Everything works well (the PAUSE & RESUME ) the stream resumes & stops acording to the clicking the buttons . I also have :

OnDestroy() {
    this.DataService.stopDataTimer();
  }

in the component !.

BUT when routing to different locations I see that the timer is still active an http calls are still transmitted . I think the problem is unsubscribing from the timer himself in 'getDataWithTimer()' function....?! Any ideas ?

Solution

You're probably not implementing OnDestroy correctly :

interface OnDestroy {
  ngOnDestroy(): void
}

The method name should be ngOnDestroy.

Answered By - Matthieu Riegler