How do I handle mousewheelup/down events in Angular2?

Question

Say, I want to increase the radius of an SVG circle on mousewheelup and decrease on mousewheeldown, how do I achieve it?

<svg width="800" height="400">
  <circle
    [attr.r]          ="cRadius" 
    (mousewheelup)    ="cRadius = cRadius + 5"
    (mousewheeldown)  ="cRadius = cRadius - 5"
  />
</svg>

Milad · Accepted Answer · 2016-12-24 11:23:04Z

3

@Directive({ selector: '[circle]' })
export class MouseWheelDirective {
  @Output() mouseWheelUp = new EventEmitter();
  @Output() mouseWheelDown = new EventEmitter();

  @HostListener('mousewheel', ['$event']) onMouseWheelChrome(event: any) {
    this.mouseWheelFunc(event);
  }

  @HostListener('DOMMouseScroll', ['$event']) onMouseWheelFirefox(event: any) {
    this.mouseWheelFunc(event);
  }

  @HostListener('onmousewheel', ['$event']) onMouseWheelIE(event: any) {
    this.mouseWheelFunc(event);
  }

  mouseWheelFunc(event: any) {
    var event = window.event ;
    var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
    if(delta > 0) {
        this.mouseWheelUp.emit(event);
    } else if(delta < 0) {
        this.mouseWheelDown.emit(event);
    }
  }
}

edited Dec 24, 2016 at 11:23

answered Dec 24, 2016 at 9:34

Milad

28.8k11 gold badges78 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

xsh.7 Over a year ago

Though, you can remove those old IE support parts, since relevant versions do not support svg at all.

Collectives™ on Stack Overflow

How do I handle mousewheelup/down events in Angular2?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related