How to Stop observable.timer in Angular2

There're are basically two ways:

  • call unsubscribe() on the Subscription object returned from the subscribe() call .
  • use an operator

To just unsubscribe you could do it like this.

ngOnInit() {
  this.subscription = timer(100, 100).subscribe(t => {
    this.setFormData();
  });
}

private setFormData() {
  ...
  this.subscription.unsubscribe();
}

Or you can use Subject to complete the Observable via takeUntil() operator:

this.subject = new Subject();

ngOnInit() {
  timer(100, 100).pipe(
    takeUntil(this.subject),
  ).subscribe(t => this.setFormData());
}

private setFormData() {
  ...
  this.subject.next();
}

Have a look these as well:

  • Difference between .unsubscribe to .take(1)
  • RxJS: takeUntil() Angular component's ngOnDestroy()

Jan 2019: Updated for RxJS 6


A nuance which previous answers haven't really covered is that there is no need to stop an observable timer/interval - at least not by interacting with the observable or the timer itself.

I found myself here because I was setting up an observable using a timer in a HostedService's start method, and in the stop method it seemed like I should be stopping it, or disposing of something surely? - well... no. The observable timer does not need to be stopped or disposed in this way, only the subscriptions, and this is why...

Observable timers and intervals are examples of cold streams (though they appear to behave as hot). They are passive not active, they do not produce data till subscribed to, and stop producing data when no subscribers. Therefore, disposal of all subscriptions should be all that's required to stop the timer producing data.

More info here... [http://introtorx.com/Content/v1.0.10621.0/14_HotAndColdObservables.html]


you can use unsubscribe method when you want to stop timer observable like this

this.timer = Observable.timer(100, 100);
this.subscription = this.timer.subscribe(t => {
    this.setFormData();
});

.............
this.subscription.unsubscribe();