Backported the events fix and camel case naming

README.md

@@ -82,7 +82,9 @@ Simply replace the element that would ordinarily be passed to `Ps.initialize` wi
 
 [runInsideAngular]      // Run perfect scrollbar inside the Angular zone.
 
-(<ps-event-name>)       // All perfect scrollbar events work as bindings.
+(<psEventName>)         // All perfect scrollbar events work as bindings.
+                        // Event namea are in camel case (not kebab case).
+                        // Example: ps-y-reach-start -> psYReachStart
 ```
 
 **DIRECTIVE USAGE**
@@ -109,7 +111,9 @@ Perfect scrollbar directive should be used with div elements and can take option
 
 [runInsideAngular]      // Run perfect scrollbar inside the Angular zone.
 
-(<ps-event-name>)       // All perfect scrollbar events work as bindings.
+(<psEventName>)         // All perfect scrollbar events work as bindings.
+                        // Event namea are in camel case (not kebab case).
+                        // Example: ps-y-reach-start -> psYReachStart
 ```
 
 ##### Available configuration options (custom / global configuration):

src/lib/perfect-scrollbar.component.html

@@ -1,4 +1,4 @@
-<div #ps="ngxPerfectScrollbar" [perfectScrollbar]="getConfig()" [hidden]="hidden" [fxHide]="fxHide" [fxShow]="fxShow" [disabled]="disabled" [usePSClass]="usePSClass" [psPosStyle]="null" [runInsideAngular]="runInsideAngular" (wheel)="onWheelEvent($event)" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" (touchend)="onTouchEnd($event)" (ps-scroll-x)="onScrollEvent($event, 'x')"  (ps-scroll-y)="onScrollEvent($event, 'y')" (ps-x-reach-end)="onScrollEvent($event, 'right')" (ps-y-reach-end)="onScrollEvent($event, 'bottom')" (ps-x-reach-start)="onScrollEvent($event, 'left')" (ps-y-reach-start)="onScrollEvent($event, 'top')">
+<div #ps="ngxPerfectScrollbar" [perfectScrollbar]="getConfig()" [hidden]="hidden" [fxHide]="fxHide" [fxShow]="fxShow" [disabled]="disabled" [usePSClass]="usePSClass" [psPosStyle]="null" [runInsideAngular]="runInsideAngular" (wheel)="onWheelEvent($event)" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" (touchend)="onTouchEnd($event)" (ps-scroll-x)="onScrollEvent($event, 'x')"  (ps-scroll-y)="onScrollEvent($event, 'y')" (ps-x-reach-end)="onScrollEvent($event, 'right')" (ps-y-reach-end)="onScrollEvent($event, 'bottom')" (ps-x-reach-start)="onScrollEvent($event, 'left')" (ps-y-reach-start)="onScrollEvent($event, 'top')" (psScrollY)="PS_SCROLL_Y.emit($event)" (psScrollX)="PS_SCROLL_X.emit($event)" (psScrollUp)="PS_SCROLL_UP.emit($event)" (psScrollDown)="PS_SCROLL_DOWN.emit($event)" (psScrollLeft)="PS_SCROLL_LEFT.emit($event)" (psScrollRight)="PS_SCROLL_RIGHT.emit($event)" (psYReachEnd)="PS_Y_REACH_END.emit($event)" (psYReachStart)="PS_Y_REACH_START.emit($event)" (psXReachEnd)="PS_X_REACH_END.emit($event)" (psXReachStart)="PS_X_REACH_START.emit($event)">
   <div class="ps-content">
     <ng-content></ng-content>
   </div>

src/lib/perfect-scrollbar.component.ts

@@ -5,8 +5,8 @@ import { Subject } from 'rxjs/Subject';
 import { Subscription } from 'rxjs/Subscription';
 
 import { Component, OnInit, OnDestroy, DoCheck } from '@angular/core';
-import { Input, HostBinding, HostListener, ViewChild } from '@angular/core';
 import { ElementRef, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
+import { Input, Output, EventEmitter, HostBinding, HostListener, ViewChild } from '@angular/core';
 
 import { PerfectScrollbarDirective } from './perfect-scrollbar.directive';
 import { Position, PerfectScrollbarConfigInterface } from './perfect-scrollbar.interfaces';
@@ -60,6 +60,19 @@ export class PerfectScrollbarComponent implements OnInit, OnDestroy, DoCheck {
 
   @ViewChild(PerfectScrollbarDirective) directiveRef: PerfectScrollbarDirective;
 
+  @Output('psScrollY'        ) PS_SCROLL_Y            = new EventEmitter<any>();
+  @Output('psScrollX'        ) PS_SCROLL_X            = new EventEmitter<any>();
+
+  @Output('psScrollUp'       ) PS_SCROLL_UP           = new EventEmitter<any>();
+  @Output('psScrollDown'     ) PS_SCROLL_DOWN         = new EventEmitter<any>();
+  @Output('psScrollLeft'     ) PS_SCROLL_LEFT         = new EventEmitter<any>();
+  @Output('psScrollRight'    ) PS_SCROLL_RIGHT        = new EventEmitter<any>();
+
+  @Output('psYReachEnd'      ) PS_Y_REACH_END         = new EventEmitter<any>();
+  @Output('psYReachStart'    ) PS_Y_REACH_START       = new EventEmitter<any>();
+  @Output('psXReachEnd'      ) PS_X_REACH_END         = new EventEmitter<any>();
+  @Output('psXReachStart'    ) PS_X_REACH_START       = new EventEmitter<any>();
+
   @HostListener('document:touchstart', ['$event']) onGeneratedEvent(event: any) {
     // Stop the generated event from reaching window for PS to work correctly
     if (event['psGenerated']) {

src/lib/perfect-scrollbar.directive.ts

@@ -47,6 +47,34 @@ export class PerfectScrollbarDirective implements OnDestroy, DoCheck, OnChanges,
     this.config = config;
   }
 
+  @Output('psScrollY'        ) PS_SCROLL_Y            = new EventEmitter<any>();
+  @Output('psScrollX'        ) PS_SCROLL_X            = new EventEmitter<any>();
+
+  @Output('psScrollUp'       ) PS_SCROLL_UP           = new EventEmitter<any>();
+  @Output('psScrollDown'     ) PS_SCROLL_DOWN         = new EventEmitter<any>();
+  @Output('psScrollLeft'     ) PS_SCROLL_LEFT         = new EventEmitter<any>();
+  @Output('psScrollRight'    ) PS_SCROLL_RIGHT        = new EventEmitter<any>();
+
+  @Output('psYReachEnd'      ) PS_Y_REACH_END         = new EventEmitter<any>();
+  @Output('psYReachStart'    ) PS_Y_REACH_START       = new EventEmitter<any>();
+  @Output('psXReachEnd'      ) PS_X_REACH_END         = new EventEmitter<any>();
+  @Output('psXReachStart'    ) PS_X_REACH_START       = new EventEmitter<any>();
+
+  private emit(event: any) { this[event.type.replace(/-/g, '_').toUpperCase()].emit(event); }
+
+  @HostListener('ps-scroll-y', ['$event'])       psScrollY(event: any) { this.emit(event); }
+  @HostListener('ps-scroll-x', ['$event'])       psScrollX(event: any) { this.emit(event); }
+
+  @HostListener('ps-scroll-up', ['$event'])      psScrollUp(event: any) { this.emit(event); }
+  @HostListener('ps-scroll-down', ['$event'])    pscrollDown(event: any) { this.emit(event); }
+  @HostListener('ps-scroll-left', ['$event'])    psScrollLeft(event: any) { this.emit(event); }
+  @HostListener('ps-scroll-right', ['$event'])   psScrollRight(event): any { this.emit(event); }
+
+  @HostListener('ps-y-reach-end', ['$event'])    psReachEndY(event): any { this.emit(event); }
+  @HostListener('ps-y-reach-start', ['$event'])  psReachStartY(event): any { this.emit(event); }
+  @HostListener('ps-x-reach-end', ['$event'])    psReachEndX(event): any { this.emit(event); }
+  @HostListener('ps-x-reach-start', ['$event'])  psReachStartX(event): any { this.emit(event); }
+
   constructor(@Optional() private defaults: PerfectScrollbarConfig, private zone: NgZone,
     public elementRef: ElementRef, private differs: KeyValueDiffers) {}
 

src/lib/perfect-scrollbar.interfaces.ts

@@ -23,6 +23,21 @@ export class Position {
   }
 }
 
+export const PerfectScrollbarEvents = [
+  'ps-scroll-y',
+  'ps-scroll-x',
+
+  'ps-scroll-up',
+  'ps-scroll-down',
+  'ps-scroll-left',
+  'ps-scroll-right',
+
+  'ps-y-reach-end',
+  'ps-y-reach-start',
+  'ps-x-reach-end',
+  'ps-x-reach-start'
+];
+
 export interface PerfectScrollbarConfigInterface {
   handlers?: string[];