import { Directive , Output , HostListener , EventEmitter } from '@angular/core' ; @ Directive ( { selector : '[mouseWheel]' } ) export class MouseWheelDirective { @ Output ( ) mouseWheelUp = new EventEmitter ( ) ; @ Output ( ) mouseWheelDown = new EventEmitter ( ) ; @ HostListener ( 'mousewheel' , [ '$event' ] ) onMouseWheelChrome ( event ) { this . mouseWheelFunc ( event ) ; } @ HostListener ( 'DOMMouseScroll' , [ '$event' ] ) onMouseWheelFirefox ( event ) { this . mouseWheelFunc ( event ) ; } @ HostListener ( 'onmousewheel' , [ '$event' ] ) onMouseWheelIE ( event ) { this . mouseWheelFunc ( event ) ; } mouseWheelFunc ( event ) { var event = window . event || 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 ) ; } event . returnValue = false ; if ( event . preventDefault ) { event . preventDefault ( ) ; } } }