How to refresh / update the carousel?

[KumarKaruppaiah]

Hi,

Currently, I am implementing the ngx-glide with dynamic data. I want to know how to update / refresh the carousel after fetching the data from API. I am getting this error when I am trying to update the model.

Can you please assist me?

Thanks in advance Kumar

[avivharuzi]

Hi, can you give me some example code?

[KumarKaruppaiah]

carousel.html

<ng-container *ngIf="showCarouselContainer">
  <ngx-glide [showArrows]="showArrows" [showBullets]="showBullets" [arrowLeftLabel]="arrowLeftLabel"
    [arrowRightLabel]="arrowRightLabel" [type]="type" [startAt]="startAt" [perView]="perView"
    [focusAt]="isCenter ? 'center' : focusAt" [gap]="gap" [autoplay]="isAutoplay ? autoplay : false"
    [hoverpause]="hoverpause" [keyboard]="keyboard" [bound]="bound"
    [swipeThreshold]="isSwipeThreshold ? swipeThreshold : false"
    [dragThreshold]="isDragThreshold ? dragThreshold : false" [perTouch]="isPerTouch ? perTouch : false"
    [touchRatio]="touchRatio" [touchAngle]="touchAngle" [animationDuration]="animationDuration" [rewind]="rewind"
    [rewindDuration]="rewindDuration" [animationTimingFunc]="animationTimingFunc" [direction]="direction"
    [listenToEvents]="true" [breakpoints]="{ '568': { perView: 1 }, '768': { perView: 1 }, '1200': { perView: 1 } }"
    [arrowLeftTemplate]="showCustomArrows && arrowLeftTemplate"
    [arrowRightTemplate]="showCustomArrows && arrowRightTemplate" [ngClass]="{ fadeIn: deviceType === 'Mobile' }"
   (resized)="refresh()">      
      <div class="carousel banner-container {{ tileListSection.titleCssClass }}"
        *ngFor="let tileListSection of tileListSections">
        <div class="background-image {{ tileListSection.backgroundImageCssClass }}">
          <img [src]="tileListSection.backgroundImage" />

          <div class="background-icon" *ngIf="tileListSection.backgroundIconImage !== ''">
            <img [src]="tileListSection.backgroundIconImage" />

          </div>
        </div>
        <div class="container">
          <div class="row no-gutters">
            <div class="col-lg-6 col-sm-12 col-md-12 place-holder"></div>
            <div class="col-lg-6 col-sm-12 col-md-12">
              <div class="carousel-info {{ tileListSection.tileInfoCssClass }}">
                <div class="carousel-details">
                  <div class="carousel-title">{{ t(tileListSection.title.translationKey) }}</div>
                  <div class="carousel-short-desc">
                    <p>{{ t(tileListSection.shortDescription.translationKey) }}</p>
                  </div>
                  <div class="carousel-long-desc">
                    <ul class="dashed">
                      <li *ngFor="let longDesc of tileListSection.longDescription">
                        {{ t(longDesc.translationKey) }}
                      </li>
                    </ul>
                  </div>
                  <div class="carousel-action">
                    <a class="btn-home btn-start" [title]="tileListSection.btnText.value"
                      [href]="tileListSection.btnLink">
                      {{ t(tileListSection.btnText.translationKey) }}</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

  </ngx-glide>
</ng-container>

carousel.ts

ngOnInit() { this.deviceTypeSubscription = this.deviceDetectorService.deviceTypeSubject.subscribe((deviceType) => { if (deviceType !== null) { this.deviceType = deviceType;
} });
this.tileListSections = this.getTileListSections();
}

refresh(){ this.tileListSections = this.getTileListSections(); // getting the error when i am trying to update the same model. }

[KumarKaruppaiah]

@avivharuzi Can you please help me on this issue?

[avivharuzi]

First update the ng-container like this: <ng-container *ngIf="showCarouselContainer && tileListSections && tileListSections.length > 0"> ... </ng-container> I am adding to the package a new method to recreate the carousel-like in your case I will notify you when it will go up.

[avivharuzi]

Please update to the last version of ngx-glide:

npm i ngx-glide@latest

Add this to your component ts:

@ViewChild(NgxGlideComponent) ngxGlide!: NgxGlideComponent;

OR

@ViewChild('ngxGlide') ngxGlide!: NgxGlideComponent;

...

refresh() {
  this.tileListSections = this.getTileListSections(); // getting the error when i am trying to update the same model.
  this.ngxGlide.recreate(); // Willl create the carousel again.
}

Hope it will help you.

[KumarKaruppaiah]

Please update to the last version of ngx-glide:

npm i ngx-glide@latest

Add this to your component ts:

@ViewChild(NgxGlideComponent) ngxGlide!: NgxGlideComponent;

OR

@ViewChild('ngxGlide') ngxGlide!: NgxGlideComponent;

...

refresh() {
  this.tileListSections = this.getTileListSections(); // getting the error when i am trying to update the same model.
  this.ngxGlide.recreate(); // Willl create the carousel again.
}

Hope it will help you.

@avivharuzi, thank you so much for fixing this bug.