CODEWITHSUNDEEP
angularrxjsobservable
POV
POV

Reputation: 12025

How to unsubscribe/stop Observable?

I use the following code for timer:

export class TimerService {
  private ticks: number = 0;
  private seconds: number = 0;
  private timer;

  constructor(seconds: number) {
    this.seconds = seconds;
    this.timer = Observable.timer(2000, 1000);
    this.timer.subscribe(t => {
      this.ticks = t;
      this.disactivate();
    });
  }

  private disactivate() {
    if (this.ticks === this.seconds) {
      this.timer.dispose();
    }
  }
}

When I try to stop timer in line:

this.timer.dispose(); // this.timer.unsubscribe();

It does not work for me

Upvotes: 10

Views: 22628

Answers (4)

Tlotli Otlotleng
Tlotli Otlotleng

Reputation: 341

I have not yet worked with the timer yet but I think the concept still works. The approach I used was working with a service.

(the work is based on: https://medium.com/angular-in-depth/the-best-way-to-unsubscribe-rxjs-observable-in-the-angular-applications-d8f9aa42f6a0)

  1. Create my new BehaviorSubject<T>(T).
  2. Create a new Subscription() object.
  3. wrap subscriptions with the addSubscription method.
  4. when the parent or higher component gets destroyed ngOnDestroy(): void unsubscribe

Service

private organisation = new BehaviorSubject<__Organisation>(newOrganisation);
organisation$ = this.organisation.asObservable();

private organisationSubscription: Subscription = new Subscription();

Service Methods

addOrganisationSubscription(subscription: Subscription): void {
    this.organisationSubscription.add(subscription);
}
unSubscribeOrganisation(): void {
    this.organisationSubscription.unsubscribe();
}

addOrganisationSubscription(subscription: Subscription): void {
   this.organisationSubscription.add(subscription);
}

Component

this.organisationService.addOrganisationSubscription(
      this.organisationService.organisation$.subscribe(
      ...
      )
)

ngOnDestroy(): void {
    this.organisationService.unSubscribeOrganisation();
}

Upvotes: 0

Don Thomas Boyle
Don Thomas Boyle

Reputation: 3045

So after some PUNISHING research I've added my own npm library for this problem.

Improves previous answer by NOT having to add any extra convolution variables and ease of use.

enter image description here

Upvotes: -1

Deeksha Bilochi
Deeksha Bilochi

Reputation: 94

The best way is to unsubscribe when instance is destroyed.

ngOnDestroy() {
 this.sub.unsubscribe();
}

Upvotes: 0

Jota.Toledo
Jota.Toledo

Reputation: 28464

The subscribe method returns a Subscription object, which you can later use to stop listening the stream contained by the observable to which you subscribed.

import { ISubscription } from 'rxjs/Subscription':
import { TimerObservable } from 'rxjs/observable/TimerObservable';

export class TimerService {
  private ticks = 0;
  private timer$: TimerObservable;
  private $timer : ISubscription;

  constructor(private seconds = 0) {
    this.timer$ = TimerObservable.create(2000, 1000);//or you can use the constructor method
    this.$timer = this.timer.subscribe(t => {
      this.ticks = t;
      this.disactivate();
    });
  }

  private disactivate() {
    if (this.ticks >= this.seconds) {
      this.$timer.unsubscribe();
    }
  }
}

Its important to notice that unsubscribe exist in rxjs (version 5 and up), before that, in rx (version lower than 5, a different package) the method was called dispose

Upvotes: 19

Related Questions