Can I fire @Hostlistner with a different mouse event?
To avoid setting an unused listener, I would like to trigger the mousemove listener only when the mousedown event is fired . Something like that:
Inside my component .ts
private startMouseMove(start: boolean){
if(start){
@HostListener('mousemove', ['$event'])
onMouseMove(event: MouseEvent){
console.log("start mousemove");
this.mousemove.emit(event);
}
}
}
@HostListener('mouseup', ['$event'])
onMouseup(event: MouseEvent){
console.log(event.type);
this.startMouseMove(false);
}
@HostListener('mousedown', ['$event'])
onMousedown(event: MouseEvent) {
console.log(event.type);
this.startMouseMove(true);
return false; // Call preventDefault() on the event
}
It doesn't work of course. I would like to know if this is possible in Angular and, if possible, how to do it?
+3
source to share
1 answer
One possible solution might be to use a reactive approach:
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/takeUntil';
@Directive({
selector: '[my-drag]'
})
export class DragDirective {
subscription: Subscription;
constructor(private elRef: ElementRef, private zone: NgZone) {}
ngOnInit() {
this.zone.runOutsideAngular(() => this.initDragEvent());
}
initDragEvent() {
const el = this.elRef.nativeElement;
const mousedown = Observable.fromEvent(el, 'mousedown');
const mouseup = Observable.fromEvent(el, 'mouseup');
const mousemove = Observable.fromEvent(document, 'mousemove');
const mousedrag = mousedown.flatMap((md: any) => {
const startX = md.offsetX;
const startY = md.offsetY;
return mousemove.map((e: any) => {
e.preventDefault();
return {
left: e.clientX - startX,
top: e.clientY - startY
};
}).takeUntil(mouseup);
});
this.subscription = mousedrag.subscribe((pos) => {
console.log('mousemove is fired');
el.style.top = pos.top + 'px';
el.style.left = pos.left + 'px';
});
}
ngOnDestroy() {
if(this.subscription) {
this.subscription.unsubscribe();
}
}
}
I am running initDragEvent
from angular zone because I dont want redundant change detected.
Another solution is to use Renderer
export class DragDirective {
listener: Function;
@HostListener('mouseup', ['$event'])
onMouseup(event: MouseEvent) {
console.log(event.type);
this.startMouseMove(false);
}
@HostListener('mousedown', ['$event'])
onMousedown(event: MouseEvent) {
console.log(event.type);
this.startMouseMove(true);
return false;
}
constructor(private renderer: Renderer2) {}
private startMouseMove(start: boolean) {
this.ngOnDestroy();
if (start) {
this.listener = this.renderer.listen(document, 'mousemove', () => {
console.log("start mousemove", this.listener);
})
}
}
ngOnDestroy() {
if(this.listener) {
this.listener();
}
}
}
+1
source to share