CODEWITHSUNDEEP
angulartypescriptowl-carousel
Tom
Tom

Reputation: 4033

Refresh owl-carousel in Angular

I have some issues with the owl carousel regarding dynamic changes, such as amount of slides etc. - in other words, the carousel tempts to break after some changes.

My approach was to reload/refresh the carousel - but how?

I found online that you have to refresh it by class:

$owl.trigger('refresh.owl.carousel');

But how do I translate this to Angular/Typescipt?

Upvotes: 2

Views: 5277

Answers (2)

Bartosz546
Bartosz546

Reputation: 105

None of the above solutions worked for me.

On production environments, where carousel loads for a few seconds I was also experiencing carousel scalability issues. I manage to solve all my problems by upgrading carousel to Angular 17 and refreshing it that way:

html template:

<owl-carousel-o [options]="customOptions" #owlCarouselRef>
      <ng-container *ngFor="let image of imageUrlArray">
        <ng-template carouselSlide>
          <img [ngSrc]="image.url" [alt]="image.url" style="width: 100%; height: 100%;" priority>
        </ng-template>
      </ng-container>
    </owl-carousel-o>
  </div>

ts controller:

 @ViewChild("owlCarouselRef") owlCarouselRef: any;


  constructor() {
    window.addEventListener("resize", () => {
      this.reinitializeOwlCarousel();
    });
    window.addEventListener("load", () => {
      this.reinitializeOwlCarousel();
    });
  }

    
  ngAfterViewInit() {
    this.reinitializeOwlCarousel();
  }

  reinitializeOwlCarousel(): void {
    this.owlCarouselRef.ngOnInit();
    this.owlCarouselRef.ngAfterContentInit();
  }

Upvotes: 0

Sergey Mell
Sergey Mell

Reputation: 8040

So, as long as you are using ngx-owl-carousel (following your comment) your implementation could look as follows.

// component template

<owl-carousel [items]="images" #owlElement>
     <div class="item" *ngFor="let image of images;let i = index">
         <div class="thumbnail-image" [ngStyle]="{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}"></div>
     </div>
 </owl-carousel>

Please, pay attention to owlElement template variable

Then if you want to handle or trigger some actions you can refer to this element

// Component class

import {OwlCarousel} from 'ngx-owl-carousel';

export class HomeComponent {

@ViewChild('owlElement') owlElement: OwlCarousel

   refresh() {
     this.owlElement.refresh()
   }
}

You can call whatever events you want from original documentation using method trigger (trigger(action: string, options?: any[])).

Upvotes: 2

Related Questions