import { ChangeDetectionStrategy , Component , ElementRef , Input , ViewChild , ViewEncapsulation } from '@angular/core' ; import { assert , isTrueProperty } from '../../util/util' ; name description usage demo @ Component ( { selector : 'ion-scroll' , template : '<div class="scroll-content" #scrollContent>' + '<div class="scroll-zoom-wrapper">' + '<ng-content></ng-content>' + '</div>' + '</div>' , host : { '[class.scroll-x]' : 'scrollX' , '[class.scroll-y]' : 'scrollY' } , changeDetection : ChangeDetectionStrategy . OnPush , encapsulation : ViewEncapsulation . None , } ) export class Scroll { _scrollX : boolean = false ; _scrollY : boolean = false ; _zoom : boolean = false ; _maxZoom : number = 1 ; input @ Input ( ) get scrollX ( ) { return this . _scrollX ; } set scrollX ( val ) { this . _scrollX = isTrueProperty ( val ) ; } input @ Input ( ) get scrollY ( ) { return this . _scrollY ; } set scrollY ( val ) { this . _scrollY = isTrueProperty ( val ) ; } input @ Input ( ) get zoom ( ) { return this . _zoom ; } set zoom ( val ) { this . _zoom = isTrueProperty ( val ) ; } input @ Input ( ) get maxZoom ( ) { return this . _maxZoom ; } set maxZoom ( val ) { this . _maxZoom = val ; } hidden maxScale : number = 3 ; hidden zoomDuration : number = 250 ; internal @ ViewChild ( 'scrollContent' , { read : ElementRef } ) _scrollContent : ElementRef ; constructor ( ) { } hidden param { Function } handler returns { ? Function } addScrollEventListener ( handler ) { assert ( this . _scrollContent , 'scroll element is missing' ) ; const ele = this . _scrollContent . nativeElement ; ele . addEventListener ( 'scroll' , handler ) ; return ( ) => { ele . removeEventListener ( 'scroll' , handler ) ; } ; } }