Can I fire @Hostlistner with a different mouse event?

Question

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

angular listener mouseevent mouselistener

J.BizMai May 24 '17 at 11:11

source to share

1 answer

yurzui · Accepted Answer · 2017-05-24T11:48:41+0000

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();
        }
    }
}

Plunger example

Can I fire @Hostlistner with a different mouse event?

More articles: