Added the performance mode also for the component

README.md

@@ -95,7 +95,6 @@ Simply replace the element that would ordinarily be passed to `Swiper` with the
 
 [index]                 // Can be used to set the active slide index.
 [disabled]              // Disables changing of slides (locks the Swiper).
-[performance]              // Toggle EventEmitters into performance mode (they run outside angular zone, and don't cause force change detection)
 
 [useSwiperClass]        // Use 'swiper' class (use provided default styles).
 
@@ -138,6 +137,7 @@ Swiper directive can be used in correctly structured div element with optional c
 
 [index]                 // Can be used to set the active slide index.
 [disabled]              // Disables changing of slides (locks the Swiper).
+[performance]           // Emit all Swiper events outside the Angular zone.
 
 (indexChange)           // Event handler for the Swiper index change event.
 

src/lib/swiper.component.html

@@ -1,4 +1,4 @@
-<div #swiper class="s-wrapper" [class.swiper]="useSwiperClass" [class.swiper-container]="useSwiperClass" [swiper]="getConfig()" [index]="index" [disabled]="disabled">
+<div #swiper class="s-wrapper" [class.swiper]="useSwiperClass" [class.swiper-container]="useSwiperClass" [swiper]="getConfig()" [index]="index" [disabled]="disabled" [performance]="performance">
   <div #swiperSlides class="swiper-wrapper">
     <ng-content></ng-content>
   </div>

src/lib/swiper.component.ts

@@ -30,6 +30,8 @@ export class SwiperComponent implements AfterViewInit, OnDestroy {
 
   @Input() disabled: boolean = false;
 
+  @Input() performance: boolean = false;
+
   @Input() config?: SwiperConfigInterface;
 
   @Input() useSwiperClass: boolean = true;

src/lib/swiper.directive.ts

@@ -85,13 +85,9 @@ export class SwiperDirective implements AfterViewInit, OnDestroy, DoCheck, OnCha
   @Output('slideChangeTransitionEnd'   ) S_SLIDECHANGETRANSITIONEND       = new EventEmitter<any>();
   @Output('slideChangeTransitionStart' ) S_SLIDECHANGETRANSITIONSTART     = new EventEmitter<any>();
 
-  constructor(
-    @Inject(PLATFORM_ID) private platformId: Object,
-    private zone: NgZone,
-    private elementRef: ElementRef,
-    private differs: KeyValueDiffers,
-    @Optional() @Inject(SWIPER_CONFIG) private defaults: SwiperConfigInterface
-  ) {}
+  constructor(@Inject(PLATFORM_ID) private platformId: Object, private zone: NgZone,
+    private elementRef: ElementRef, private differs: KeyValueDiffers,
+    @Optional() @Inject(SWIPER_CONFIG) private defaults: SwiperConfigInterface) {}
 
   ngAfterViewInit(): void {
     if (!isPlatformBrowser(this.platformId)) {
@@ -160,6 +156,7 @@ export class SwiperDirective implements AfterViewInit, OnDestroy, DoCheck, OnCha
         }
 
         const output = `S_${swiperEvent.toUpperCase()}`;
+
         const emitter = this[output as keyof SwiperDirective] as EventEmitter<any>;
 
         if (emitter.observers.length) {
@@ -175,14 +172,6 @@ export class SwiperDirective implements AfterViewInit, OnDestroy, DoCheck, OnCha
     }
   }
 
-  emit(emitter: EventEmitter<any>, value: any) {
-    if (!this.performance) {
-      this.zone.run(() => emitter.emit(value));
-    } else {
-      emitter.emit(value);
-    }
-  }
-
   ngOnDestroy(): void {
     if (this.instance) {
       this.zone.runOutsideAngular(() => {
@@ -229,6 +218,14 @@ export class SwiperDirective implements AfterViewInit, OnDestroy, DoCheck, OnCha
     }
   }
 
+  private emit(emitter: EventEmitter<any>, value: any): void {
+    if (this.performance) {
+      emitter.emit(value);
+    } else {
+      this.zone.run(() => emitter.emit(value));
+    }
+  }
+
   public swiper(): any {
     return this.instance;
   }