How to Stop observable.timer in Angular2

Question

I am implementing the following functions in Angular2's Component:

export class MypageEditComponent {

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


  private setFormData() {
    this.editUserAcountType = this.authStore.registerInfo.account_type;
    this.editAddress = this.authStore.registerInfo.email;
    this.editUserName = this.authStore.registerInfo.username;
  }
}

I want to stop the repeat of Observable.timer once the value is correctly stored with setFormData().

But do not know how, please tell me.

Solution 1

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

Solution 2

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();

Solution 3

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]