How to Stop observable timer in Angular

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.

Answer 1

Hello @kartik,

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

Hope it helps!!

To know more about Angular, It's recommended to join Angular Training Certification today.

Thank you!!