CODEWITHSUNDEEP
angularecmascript-6
anonym
anonym

Reputation: 4850

How do I handle mousewheelup/down events in Angular2?

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>

Upvotes: 0

Views: 1331

Answers (1)

Milad
Milad

Reputation: 28592

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

Upvotes: 3

Related Questions