"owl-carousel-o" not proper working with model in angular 11

Question

I'm using <owl-carousel-o> with bootstrap model.

here problem like below

When click on image , model will be open but data not display properly at first time after pressing f3,f10,f11,f12 data will be displayed successfully. it is working properly while not using model and also loading data perfectly. It's not taking time in loading data. Data is displayed only after pressing f3,f10,f12,f11 function key. I thinks its creating issue due to popper.min.js or jquery.min.js but they are compulsory for opening model

I also tried with tether.min.js but getting same problem.

At first time model look like :

After pressing function key image look like :

Modal Code:

<div [style.display]="showModal ? 'block' : 'none'" class="modal" id="imagemodal" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="row">
        <div class="container d-flex justify-content-center">

            <div class="container d-flex justify-content-center">

                <div class="card" style="width: 28rem;" id="mcard">

                    <div class="card-header bg-transparent border-bottom-0">

                        <button (click)=" hide()" type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <owl-carousel-o [class.owl-refreshed]="refresh" [options]="customOptions" #owlElement>
                        <ng-container *ngFor="let img of slidesstore">
                            <ng-template carouselSlide [id]="img.id">
                                <img style="height: 260px;width:100%;object-fit: cover;"
                                    src='{{"assets/images/" + img.image}}' [alt]="img.name" [title]="img.name"
                                    data-hash="five" />
                                <div class="card-body">
                                    <p>{{img.id}}</p>
                                    <h5 class="card-title">{{img.name}} </h5>
                                    <p class="card-text">{{img.description}}</p>
                                </div>
                            </ng-template>
                        </ng-container>
                    </owl-carousel-o>
                </div>

            </div>
        </div>
    </div>
</div>

Angular code:

@ViewChild('owlElement', {static: true}) owlElement: CarouselComponent;
 customOptions: OwlOptions = {
   
      loop: false,
      mouseDrag: true,
      touchDrag: true,
      pullDrag: false,
      dots: false,
      navSpeed: 700,
      navText: ['&#8249', '›'],
      responsive: {
        0: {
          items: 1,
        },
        400: {
          items: 1,
        },
        740: {
          items: 1,
        },
        940: {
          items: 1,
        }
      },
      nav: true
    }

 show(id: number) {
    this.owlElement.to(id + "");
    this.owlElement.options = this.customOptions;
    this.refresh = true;
 }

Can anyone please suggest me why it's happened ? How can I solved this problem?

I attached code in CodeSandBox . I'm new with codesandbox so I don't have idea how I add jquery.min.js, popper.min.js and bootstrap.min.js in angular.cli. I added dependency in it. and also don't have idea how to add appRoutingModule so I added code in app.component.ts but In original project it's inside home component.

Answer would be appreciated.

Thanks in advance.

Answer 1

An alternative: You can achieve the same (Carousel inside a Modal) using Angular Bootstrap's Modal and Carousel:

HTML:

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-slide-show">Slide Show</h4>
    <button
      type="button"
      class="close"
      aria-label="Close"
      (click)="modal.close()"
    >
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <ngb-carousel *ngIf="slidesStore" [activeId]="activeSlideId">
      <ng-container *ngFor="let slide of slidesStore">
        <ng-template ngbSlide [id]="slide.id">
          <img
            src="{{ 'assets/images/' + slide.image }}"
            [alt]="slide.name"
            [title]="slide.name"
            style="height: 200px; width: 100%; object-fit: cover"
          />
          <div class="card-body text-center">
            <p>{{ slide.id }}</p>
            <h5 class="card-title">{{ slide.name }}</h5>
            <p class="card-text">{{ slide.description }}</p>
          </div>
        </ng-template>
      </ng-container>
    </ngb-carousel>
  </div>
</ng-template>

Component:

constructor(private modalService: NgbModal, config: NgbCarouselConfig) {
  config.showNavigationArrows = true;
  config.showNavigationIndicators = true;
  config.interval = 5000; // make it 0 to stop auto slide
  config.animation = true;
  config.keyboard = true;
}

activeSlideId = ''; // used to dynamically set the slide id

slidesStore = [
  {
    id: '39',
    name: 'Nature Photography',
    description:
      'Natural photography comprises of pictures ...',
    image: '1613460415834_nature-photography.jpg',
    createdAt: 1613730219987,
    views: 165,
  },
  ...
]

show(id: number | string, i: number) {
  this.openModal(this.content);
  this.activeSlideId = id + ''; // set active slide id to start from
}

For more details and options check Modal and Carousel.