how to destroy owl carousel then reinitialize it after ngfor finish in agnular 11?

I'm using owl-carousel.

Code:

   <owl-carousel [options]="customOptions" [items]="slidesStore1" >
                 [carouselClasses]="['owl-theme', 'sliding']"  #owlElement>
       <div class="item" *ngFor="let img of slidesStore1;let modelpostion = index" carouselSlide 
                    [id]=img.id >
            <img style="height: 260px;width:100%;object-fit: cover;" src='{{"assets/images/" + 
                      img.image}}' [alt]="img.name" [title]="img.name" />
            <div class="card-body">
               <h5 class="card-title">{{img.name}} </h5>
               <p class="card-text">{{img.description}}</p>
             </div>
         </div>
 </owl-carousel> 

@ViewChild('owlElement', { static: true }) owlElement: OwlCarousel;

  customOptions: OwlModule = {

    loop: false,
    mouseDrag: true,
    touchDrag: true,
    pullDrag: false,
    dots: false,
    navSpeed: 700,
    navText: ['&#8249', '›'],
    /*  animateOut: 'fadeOut',
       animateIn: 'fadeIn', */
       
    responsive: {
      0: {
        items: 1,
      },
      400: {
        items: 1,
      },
      740: {
        items: 1,
      },
      940: {
        items: 1,
      }
    },
    nav: true
  }

  show(id: number, i: number) {
    this.owlElement.to([i])
    this.owlElement.options = this.customOptions;
    this.refresh = true;
}

I have tried this for getting current position:

 this.owlElement.$owlChild.$owl.on("changed.owl.carousel", (event: any) => {
       this.currentSlideIndex = event.item.index;
}

but problem occurs like when first time click on image , model will be open and event occur once but event also occur when changing page without clicking on image and after that "changed.owl.carousel" event occur twice , thrice. I don't understand why it's happened.

I search on google but didn't getting proper solution. I found on google "after ngfor finish you must destroy owl carousel then reinitialize it."
so how can I destroy owl carousel and reinitialize it in .ts file?

I tried this this.owlElement.$owlChild.trigger('destroy.owl.carousel'); but not works.

can anyone please suggest me how can I destroy and reinitialize carousel in angular 11?

Thanks in advance.