angular unsubscribe does not work without ngOnDestroy

Question

Unable to unsubscribe on a subscription if used in a public method and not ngOnDestroy.

If have rxjs observable interval that is used to poll an API. onNgInit I subscribe to that observable as follows:

Class .. {
   pollingSubscription: Subscription;

  ngOnInit() {
      startPolling();
  } 

  // when this gets triggered my polling subscription stops
  ngOnDestroy() {
      if (this.pollingSubscribe) {
          this.pollingSubscription.unsubscribe();
      }
  }

   startPolling() {
      const pollingInterval: Observable<any> = observable.interval(3000).startWith(0);
      this.pollingSubscription = pollingInterval.subscribe( _ => {
         this.store.dispatch(// trigger my Action);
      });
   }

   // when this gets triggered on a click event my polling subscription still keeps polling.
   stopPolling() {
       if ( // condition true) {
           // on this condition stop polling, FYI this line does get triggered,
           // but there is no effect, it still keeps subscribed.
           this.pollingSubscription.unsubscribe();
       }
   }
}

Is there anything wrong that I doing, in the public function stopPolling(). How do I unsubscribe on a condition while still active on a given component.

Thanks.

its just an example, it can be called anywhere, like a click event. — patz, Aug 29 '18 at 20:58
I asked because I did not see the functional call where the subscription is unsubscribed from. — Anjil Dhamala, Aug 29 '18 at 21:01
@patz are you sure the condition is true? there is nothing wrong with the code, it should unsubscribe without a problem — ggradnig, Aug 29 '18 at 21:02
Can you confirm that `this.pollingSubscription.unsubscribe` is called in `stopPolling`? For exmple, by putting a `console.log` just after that line. — ConnorsFan, Aug 29 '18 at 21:02
I understand, it does get triggered and the unsubscribe line does execute, but does not take effect. — patz, Aug 29 '18 at 21:03
@ggradnig if that was the case then wouldn't the ngOnDestroy have the same behavior. which is not the case. — patz, Aug 29 '18 at 21:05
Well, I'm not sure what's different in your code, but I've reconstructed it on StackBlitz and can't find any problem: https://stackblitz.com/edit/angular-sdzxqe?file=src%2Fapp%2Fapp.component.ts — ggradnig, Aug 29 '18 at 21:10
@ggradnig thanks for doing that, it does seem it works as supposed there. — patz, Aug 29 '18 at 21:13
And `startPolling` is not called multiple times, from somewhere else? — ConnorsFan, Aug 29 '18 at 21:29

score 0 · Answer 1 · answered Aug 30 '18 at 12:54

Did your class uses implements OnInit, OnDestroy ?? may be if your class is not implemented using OnDestroy then ngOnDestroy() will not be executed. This is the official link for OnDestroy

The following snippet shows how a component can implement this interface to define its own custom clean-up method.

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements OnDestroy {
    ngOnDestroy() {
       // ...
    }
}

angular unsubscribe does not work without ngOnDestroy

1 Answers1