refactor(slick): slick call within runOutsideAngular

leo6104 · Jun 10, 2018 · dcc5f1b · dcc5f1b
1 parent 3f99f73
commit dcc5f1b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-slick-carousel",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "scripts": {
     "build": "ng build ngx-slick-carousel",
     "docs": "npm run docs:build",

diff --git a/src/package.json b/src/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-slick-carousel",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/leo6104/ngx-slick-carousel"

diff --git a/src/slick.component.ts b/src/slick.component.ts
@@ -1,3 +1,4 @@
+import {isPlatformBrowser} from '@angular/common';
 import {
   Component,
   Input,
@@ -14,7 +15,6 @@ import {
   PLATFORM_ID
 } from '@angular/core';
 import {NG_VALUE_ACCESSOR} from '@angular/forms';
-import {isPlatformBrowser} from '@angular/common';
 
 declare const jQuery: any;
 
@@ -43,8 +43,8 @@ export class SlickCarouselComponent implements AfterViewInit, OnDestroy {
 
   public slides: any = [];
   public $instance: any;
-  private initialized: Boolean = false;
   public currentIndex: number;
+  private initialized: Boolean = false;
 
   /**
    * Constructor
@@ -119,60 +119,60 @@ export class SlickCarouselComponent implements AfterViewInit, OnDestroy {
     if (!this.initialized) {
       this.initSlick();
     }
-
     this.slides.push(slickItem);
-    this.$instance.slick('slickAdd', slickItem.el.nativeElement);
+
+    this.zone.runOutsideAngular(() => {
+      this.$instance.slick('slickAdd', slickItem.el.nativeElement);
+    });
   }
 
   removeSlide(slickItem: SlickItemDirective) {
     const idx = this.slides.indexOf(slickItem);
-    this.$instance.slick('slickRemove', idx);
     this.slides = this.slides.filter(s => s !== slickItem);
+    this.zone.runOutsideAngular(() => {
+      this.$instance.slick('slickRemove', idx);
+    });
   }
 
   /**
    * Slick Method
    */
   public slickGoTo(index: number) {
-    this.zone.run(() => {
+    this.zone.runOutsideAngular(() => {
       this.$instance.slick('slickGoTo', index);
     });
   }
 
   public slickNext() {
-    this.zone.run(() => {
+    this.zone.runOutsideAngular(() => {
       this.$instance.slick('slickNext');
     });
   }
 
-
   public slickPrev() {
-    this.zone.run(() => {
+    this.zone.runOutsideAngular(() => {
       this.$instance.slick('slickPrev');
     });
   }
 
   public slickPause() {
-    this.zone.run(() => {
+    this.zone.runOutsideAngular(() => {
       this.$instance.slick('slickPause');
     });
   }
 
   public slickPlay() {
-    this.zone.run(() => {
+    this.zone.runOutsideAngular(() => {
       this.$instance.slick('slickPlay');
     });
   }
 
   public unslick() {
-    this.zone.run(() => {
+    this.zone.runOutsideAngular(() => {
       this.$instance.slick('unslick');
-      this.initialized = false;
     });
+    this.initialized = false;
   }
-
-
-
 }
 
 @Directive({