Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

unsubscribe is not a function on an observable

I'm making a drag and drop application and I have created an observable to the mouse position, that repositions my drag-object.

mouseMove$: any;

constructor(){
  this.mouseMove$ = Observable.fromEvent(document, 'mousemove')
    .do((mouseevent: MouseEvent) => {
      if (document.getElementById("drag-object")){
        document.getElementById("drag-object").style.left = (mouseevent.clientX) + 'px';
        document.getElementById("drag-object").style.top = (mouseevent.clientY) + 'px';
      }
  });

With this implementation I have no problem subscribing in this way:

this.mouseMove$.subscribe();

however I cannot seem to unsubscribe by either:

this.mouseMove$.unsubscribe();

or

this.mouseMove$.dispose();

in either case I get the following type of error:

TypeError: this.mouseMove$.unsubscribe is not a function ...

I'm not sure if this has to do with the mouseMove$ type of any, but setting the type as Observable and Observable<MouseEvent> did not work. What am I not understanding here?

like image 984
Nate May Avatar asked Dec 16 '16 19:12

Nate May


People also ask

Do you need to unsubscribe from observable?

In Angular applications, it's always recommended to unsubscribe the observables to gain benefits like: Avoids Memory Leaks. Aborting HTTP requests to avoid unwanted calls.

Do we need to unsubscribe observable in Angular?

🎩 Automagically Unsubscribe in Angular As you probably know when you subscribe to an observable or event in JavaScript, you usually need to unsubscribe at a certain point to release memory in the system. Otherwise, you will have a memory leak. A memory leak occurs when a section of memory that is no longer being…

How do I unsubscribe from RxJS observable?

Unsubscribing Manually One method we can use, is to unsubscribe manually from active subscriptions when we no longer require them. RxJS provides us with a convenient method to do this. It lives on the Subscription object and is simply called . unsubscribe() .

Can we cancel observable?

We can simply call the unsubscribe() method from the Subscription object returned by the subscribe() method in the ngOnDestroy() life-cycle method of the component to unsubscribe from the Observable. There is also a better way to unsubscribe from or complete Observables by using the takeUntil() operator.


2 Answers

You're probably using a newer version of RxJS, where there has been an API change where Observable.subscribe returns a Disposable, from which you call .unsubscribe now (dispose became unsubscribe in RxJS5). Unfortunately there are still lots of old tutorials and blog posts out there doing it "the old way", resulting in this confusion.

Thus, your code should be

let disposeMe = this.mouseMove$.subscribe();

and, after you're done

disposeMe.unsubscribe();

For a full list of API changes from Version 4 to 5, check this file.

like image 156
Georg Grab Avatar answered Oct 03 '22 19:10

Georg Grab


make sure your this.mouseMove$ is an observable first:

if (this.mouseMove$ !== undefined) {
  this.mouseMove$.unsubscribe();
}

probably in your case, you unsubscribe before this.mouseMove$ has not been assigned any value yet.

like image 40
Bo Chen Avatar answered Oct 03 '22 17:10

Bo Chen