DUMP

package.json

@@ -31,6 +31,7 @@
     "@angular/compiler": "^4.0.0",
     "@angular/compiler-cli": "^4.0.0",
     "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@compodoc/compodoc": "^1.0.0-beta.7",
@@ -64,5 +65,9 @@
   },
   "engines": {
     "node": ">=6.0.0"
+  },
+  "dependencies": {
+    "jquery": "^3.2.1",
+    "slick-carousel": "^1.6.0"
   }
 }

src/index.ts

@@ -1,35 +1,26 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SampleComponent } from './sample.component';
-import { SampleDirective } from './sample.directive';
-import { SamplePipe } from './sample.pipe';
-import { SampleService } from './sample.service';
+import {NgModule, ModuleWithProviders} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {SlickComponent, SlickItemDirective} from './slick.component';
 
-export * from './sample.component';
-export * from './sample.directive';
-export * from './sample.pipe';
-export * from './sample.service';
+export * from './slick.component';
 
 @NgModule({
-  imports: [
-    CommonModule
-  ],
-  declarations: [
-    SampleComponent,
-    SampleDirective,
-    SamplePipe
-  ],
-  exports: [
-    SampleComponent,
-    SampleDirective,
-    SamplePipe
-  ]
+    imports: [
+        CommonModule
+    ],
+    declarations: [
+        SlickComponent,
+        SlickItemDirective,
+    ],
+    exports: [
+        SlickComponent,
+        SlickItemDirective,
+    ]
 })
-export class SampleModule {
-  static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: SampleModule,
-      providers: [SampleService]
-    };
-  }
+export class SlickModule {
+    static forRoot(): ModuleWithProviders {
+        return {
+            ngModule: SlickModule,
+        };
+    }
 }

src/package.json

@@ -20,7 +20,12 @@
   "typings": "ngx-slick.d.ts",
   "peerDependencies": {
     "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.4"
+  },
+  "dependencies": {
+    "jquery": "^3.2.1",
+    "slick-carousel": "^1.6.0"
   }
 }

src/slick.component.ts

@@ -0,0 +1,167 @@
+import {
+    Component, Input, Output, EventEmitter, NgZone, forwardRef, AfterViewInit,
+    OnDestroy, Directive, ElementRef, Host
+} from '@angular/core';
+import {NG_VALUE_ACCESSOR} from '@angular/forms';
+
+import {JQuerySlickOptions} from 'slick';
+declare var $: any;
+
+/**
+ * Slick component
+ * Usage :
+ *  <json-editor [(ngModel)]="data" [config]="{...}"></json-editor>
+ */
+@Component({
+    selector: 'ngx-slick',
+    exportAs: 'slick-modal',
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => SlickComponent),
+            multi: true
+        }
+    ],
+    template: '<ng-content></ng-content>',
+})
+export class SlickComponent implements AfterViewInit, OnDestroy {
+
+    @Input() config: JQuerySlickOptions;
+    @Output() afterChange: EventEmitter<any> = new EventEmitter();
+    @Output() beforeChange: EventEmitter<any> = new EventEmitter();
+    @Output() breakpoint: EventEmitter<any> = new EventEmitter();
+    @Output() destroy: EventEmitter<any> = new EventEmitter();
+
+    public slides: any = [];
+    public $instance: any;
+    private initialized: Boolean = false;
+
+    /**
+     * Constructor
+     */
+    constructor(private el: ElementRef, private zone: NgZone) {
+
+    }
+
+    /**
+     * On component destroy
+     */
+    ngOnDestroy() {
+        this.unslick();
+    }
+
+    /**
+     * On component view init
+     */
+    ngAfterViewInit() {
+    }
+
+    /**
+     * init slick
+     */
+    initSlick() {
+        const self = this;
+
+        this.zone.runOutsideAngular(() => {
+            this.$instance = $(this.el.nativeElement).slick(this.config);
+            this.initialized = true;
+
+            this.$instance.on('afterChange', (event, slick, currentSlide) => {
+                self.zone.run(() => {
+                    self.afterChange.emit({event, slick, currentSlide});
+                });
+            });
+
+            this.$instance.on('beforeChange', (event, slick, currentSlide, nextSlide) => {
+                self.zone.run(() => {
+                    self.beforeChange.emit({event, slick, currentSlide, nextSlide});
+                });
+            });
+
+            this.$instance.on('breakpoint', (event, slick, breakpoint) => {
+                self.zone.run(() => {
+                    self.breakpoint.emit({event, slick, breakpoint});
+                });
+            });
+
+            this.$instance.on('destroy', (event, slick) => {
+                self.zone.run(() => {
+                    self.destroy.emit({event, slick});
+                });
+            });
+        });
+    }
+
+    addSlide(slickItem: SlickItemDirective) {
+        if (!this.initialized) {
+            this.initSlick();
+        }
+
+        this.slides.push(slickItem);
+        this.$instance.slick('slickAdd', slickItem.el.nativeElement);
+    }
+
+    removeSlide(slickItem: SlickItemDirective) {
+        console.log(`removeSlide`, slickItem);
+        const idx = this.slides.indexOf(slickItem);
+        this.$instance.slick('slickRemove', idx);
+        this.slides = this.slides.filter(s => s !== slickItem);
+    }
+
+    /**
+     * Slick Method
+     */
+    public slickGoTo(index: number) {
+        this.zone.run(() => {
+            this.$instance.slick('slickGoTo', index);
+        });
+    }
+
+    public slickNext() {
+        this.zone.run(() => {
+            this.$instance.slick('slickNext');
+        });
+    }
+
+
+    public slickPrev() {
+        this.zone.run(() => {
+            this.$instance.slick('slickPrev');
+        });
+    }
+
+    public slickPause() {
+        this.zone.run(() => {
+            this.$instance.slick('slickPause');
+        });
+    }
+
+    public slickPlay() {
+        this.zone.run(() => {
+            this.$instance.slick('slickPlay');
+        });
+    }
+
+    public unslick() {
+        this.zone.run(() => {
+            this.$instance.slick('unslick');
+        });
+    }
+
+}
+
+@Directive({
+    selector: '[ngxSlickItem]',
+})
+export class SlickItemDirective implements AfterViewInit, OnDestroy {
+    constructor(public el: ElementRef, @Host() private carousel: SlickComponent) {
+    }
+
+    ngAfterViewInit() {
+        this.carousel.addSlide(this);
+    }
+
+    ngOnDestroy() {
+        this.carousel.removeSlide(this);
+    }
+}

tsconfig.json

@@ -9,6 +9,8 @@
       "dom"
     ],
     "skipLibCheck": true,
-    "types": []
+    "types": [
+      "./src/slick.d.ts"
+    ]
   }
 }