Convert Subject to Observable

Question

I want to run this example with rxjs5. But it doesn't work. I've stucked on #41 line. It says that map returns Subject and it doesn't have .takeUntil method. What is the best way to implement it? Thanks

Answer 1

Your example is really old, it's using things like toRx() that were deprecated and removed long ago. The example is also using EventEmitters and is subscribing to them and we should't do that and it's also setting values to the DOM using nativeElement and we shouldn't do that either.

So I modified the example a little bit

• I removed EventEmitter and replaced it by Subject
• Removed toRx(), no needed anymore
• Used Renderer to set cursor and position of the element.

This is a little snippet of what the code looks like by now, it's not that different.

  constructor(public element: ElementRef, public renderer: Renderer) {
    this.renderer.setElementStyle(element.nativeElement, 'position', 'relative');
    this.renderer.setElementStyle(element.nativeElement, 'cursor', 'pointer');

    this.mousedrag = this.mousedown.map(event => {
        event.preventDefault();
        return {
          left: event.clientX - this.element.nativeElement.getBoundingClientRect().left,
          top:  event.clientY - this.element.nativeElement.getBoundingClientRect().top
        };
      })
      .flatMap(imageOffset => this.mousemove.map(pos => ({
        top:  pos.clientY - imageOffset.top,
        left: pos.clientX - imageOffset.left
      }))
      .takeUntil(this.mouseup));

  }

Here's the full example working.

Answer 2

From your repo it seems like you are using older version of Angular2 packages.
But you may try this, or Eric Martinez has given you wonderful working demo.

import 'rxjs/Rx';