gian-ngx-tiny-slider/src/lib/gian-ngx-tiny-slider.component.ts

Angular component that gives you possibility to use tiny-slider library.

import {Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';

import {Subject} from 'rxjs';
import {first, takeWhile} from 'rxjs/operators';

import {GianNgxTinySliderService} from './gian-ngx-tiny-slider.service';
import {NgxTinySliderSettingsInterface} from './interfaces/ngx-tiny-slider-settings.interface';

@Component({
  selector: 'ngx-tiny-slider',
  templateUrl: 'gian-ngx-tiny-slider.component.html',
  styleUrls: ['gian-ngx-tiny-slider.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class GianNgxTinySliderComponent implements OnInit, OnDestroy {
  @Input() config: NgxTinySliderSettingsInterface = {};
  @ViewChild('slideItems', { static: true }) slideItemsContainerRef;

  public sliderInstance;
  private aliveObservable = true;

  public domReady = new Subject();
  private defaultConfig = this.ngxTinySliderService.getDefaultConfig();

  constructor(private ngxTinySliderService: GianNgxTinySliderService) {
  }

  ngOnInit() {
    if (this.config) {
      this.extendConfig();
    }

    if (this.config.waitForDom) {
      this.listenForDomReady();
    } else {
      this.initSlider();
    }
  }

  ngOnDestroy() {
    if (this.config.waitForDom) {
      this.aliveObservable = false;
    }

    if (this.sliderInstance && this.sliderInstance.destroy) {
      this.sliderInstance.destroy();
    }
  }

  private listenForDomReady() {
    this.domReady
      .pipe(
        first(),
        takeWhile(() => this.aliveObservable)
      )
      .subscribe(() => this.initSlider());
  }

  private extendConfig() {
    Object.keys(this.config).forEach(i => this.defaultConfig[i] = this.config[i]);
  }

  private initSlider() {
    this.sliderInstance = this.ngxTinySliderService.initSlider(this.defaultConfig, this.slideItemsContainerRef);
  }
}