7

I want to know how it's possible to get mouse coordinates X and Y using only Observables without http service using Angular 4.

d0xzen
  • 181
  • 1
  • 1
  • 9
  • What did you try? How is it possible *with* http service? Why is it Angular and not RxJS question after all? – Estus Flask Jul 07 '17 at 14:40
  • @estus i tried a lot of tutorials on the network but every tutorial it talk about observables and http so i'm not able to understand how observables really works i want to use mouse coordinate to undestrand the real working of it. – d0xzen Jul 07 '17 at 14:42
  • Because observables aren't specific to Angular. Http is one of several things in Angular that use observables, that's why it's mentioned in Angular tutorials. Otherwise Angular is not relevant at all. It's RxJS. Read RxJS tutorials for that, not Angular. – Estus Flask Jul 07 '17 at 14:56
  • @estus yes i know that rxjs it's a library and it's not necessary connected with angular, but i wanted only to find a tutorial that explains how obs work and not with other services, i know how to make it work with http or with other custom services. I lost more than 3 hours to find someone that really explain that, now everything is fixed and working, i hope that this question can help other people too – d0xzen Jul 07 '17 at 15:29

3 Answers3

14

Http module is not a dependency for RxJS observables, so you don't have to use it. In fact, Http module itself uses RxJS to empower Http operands with reactive capabilities.

In order to subscribe to events like mousemove, you would simply import fromEvent and Observable and subscribe to its event emitter. Something like this should work:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';

Observable.fromEvent(document.body, 'mousemove').subscribe(e => {
  console.log(e.pageX, e.pageY)
})

Of course, use the appropriate event source (instead of document.body).

yohosuff
  • 1,359
  • 1
  • 11
  • 19
dfsq
  • 191,768
  • 25
  • 236
  • 258
  • in fact i said without using http, i know that i don't need that service, but on every tutorial that i see or book that explain observables it takes the http service as example... thank you so much just tried your example and it worked like a sharm :) – d0xzen Jul 07 '17 at 14:47
  • Except "pageX" and "pageY" are unknown properties of e (no class given) HOW do I "cast" e ?!? – T4NK3R Sep 17 '17 at 07:24
  • 1
    To sort the unknown properties error, just assign the value returned to the MouseEvent object. Hence, ... .subscribe((e:MouseEvent){ ... – vicgoyso Jan 29 '18 at 16:59
  • 1
    newer versions of NgRx: import { fromEvent } from 'rxjs'; fromEvent(document.body, 'mousemove').subscribe((e: MouseEvent) => { console.log(e.pageX, e.pageY); }); – Lord Midi Sep 27 '19 at 10:57
6

This question is pretty old but seems to draw some attention by using google. The answer above is totally correct and i just want to give a brief hint for people looking for a Angular 9 solution (and maybe below).

Using Angular Directives alongside with the decorator @HostListener we can add DOM event listeners as follows:

Inside your Angular Directive class:

@Directive({
  selector: '[appMousePosition]'
})
export class MosuePositionDirective {

  ...

  @HostListener('mousemove', ['$event']) onMouseMove(event) {
    console.log(event.clientX, event.clientY);
  }
}

Inside your HTML source:

<div appMousePosition ...> </div>

If the client's mouse is moving inside the visible <div> element the Event will fire.

See Angular's documentation about @HostListeners 1 and Angular's Directives 2 for further details.

Chrizzldi
  • 521
  • 1
  • 8
  • 22
2

If you want to track the mouse coordinates only on a certain element, you can also use mousemove like an Output directly on an html element.

Template:

<div (mousemove)="mouseMoved($event)"></div>

Typescript:

mouseMoved(event: MouseEvent) {
  //...
}
Grochni
  • 1,663
  • 20
  • 25