unsubscribe is not a function on an observable

Question

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?

Georg Grab · Accepted Answer · 2016-12-16T20:01:17.920

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.

score 4 · Answer 2 · answered Dec 16 '16 at 19:49

4

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.

answered Dec 16 '16 at 19:49

Bo Chen

156
9

score 0 · Answer 3 · edited Jul 14 '21 at 11:03

0

  this.getValue= this.ntUser.salesEnquiry()
      .subscribe(
        (result) => {
    // some action
          this.getdataapi.unsubscribe();
        },
        (error) => {
          // some action
        }
      );
  }

edited Jul 14 '21 at 11:03

Slava Rozhnev

9,510
6
23
39

answered Jul 14 '21 at 10:28

DinoRaj p

21
3

3

Please explain the reason why the OP was facing the issue and how your answer resolves it. – Shivam Singla Jul 15 '21 at 06:45

score -2 · Answer 4 · answered Jul 26 '17 at 18:32

-2

Take a look at brianflove.com.

By setting mouseMove$: ISubscription, should take care of the issue.

answered Jul 26 '17 at 18:32

Roger

1

can you modify answer please with core description? – Sergii Jul 26 '17 at 18:59
Instead of using "mouseMove$: any", declare the data type to ISubscription, will remove the error you are seeing. – Roger Jul 28 '17 at 16:19

unsubscribe is not a function on an observable

4 Answers4

Linked