How to Re-initialize(items) in the slider once it is already loaded

[mksmanjit]

Hi,

I am working on the e-commerce application and on product detail page i am showing product detail and bottom of the same page i am showing the related products using ngx-tiny-slider.

when user click on any of the related products than same router hit with different id say when the first time user came on the product-detail page the router was /product-detail/1 and when user click on the related product then the router /product-detail/2.

So expected behavior is when user user click on the related product item then that product detail should be show and "related product" related to the current product should come in the slider. But everything work fine but the new "related product" not properly re-initialized in the tiny-slider.

export class ProductDetailComponent implements OnInit {
  sku : Sku;
  skus: Sku[];
  tinySliderConfig: NgxTinySliderSettingsInterface;
  @ViewChild("slider", {static: false}) slider: NgxTinySliderInstanceInterface;
  slideConfig = {"slidesToShow": 4, "slidesToScroll": 1, "infinite": false};

  constructor(private cartService: CartsService, private skusService: SkusService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.tinySliderConfig = {
      waitForDom: true,
      mouseDrag: true,
      arrowKeys: true,
      nav: false,
      responsive: {
        0: {
          items: 1
        },
        481: {
          items: 2
        },
        768: {
          items: 3
        },
        1199: {
          items: 4
        }
      },
      gutter: 20,
      controlsText: ['<i class="ion-ios-arrow-left"></i>', '<i class="ion-ios-arrow-right"></i>']
    };
    this.route.paramMap.subscribe(params => {
      let skuId = params.get('productId');
      this.skusService.get(skuId).subscribe((sku : Sku) => {
        this.sku = sku;
      });
      this.skusService.get(skuId+'/similar-products?limit=10').subscribe((skus : Sku[]) => {
        this.skus = skus;
        setTimeout(() => {
  //**Below is the logic i tried but not working properly
          if(this.slider.sliderInstance) {
             this.slider.sliderInstance.destroy();
             this.slider.sliderInstance.rebuild();
            this.slider.sliderInstance.refresh();
          }**
          this.slider.domReady.next();
        },0);
      });
    });

  }

Please suggest where i am doing wrong.

[mksmanjit]

@vdanyliv Any update on this,Please suggest any solution, i am stuck here,didn't find any workaround as well..

[vdanyliv]

@mksmanjit I can help you only if you provide sandbox