title: @ViewChild returns undefined. I can not access to the carousel ElementRef inside a modal
body: <p>I am new to Angular CLI and I am using v11. I am trying to create an image gallery that clicking on some image generates a modal with a carousel showing the selected image at the beginning. But when I click on the image and the modal appears, for some reason the @ViewChild decorator, it always returns undefined.</p>
  <p>My template code is the following:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;mat-card&gt;
    &lt;mat-card-subtitle&gt;Gallery&lt;/mat-card-subtitle&gt;
    &lt;mat-card-content&gt;
      &lt;ng-template id=&quot;mySlides&quot; #myModal class=&quot;h-100 h-auto&quot; let-d=&quot;dismiss&quot;&gt;
        &lt;div class=&quot;modal-header&quot;&gt;
          &lt;h4 class=&quot;modal-title&quot;&gt;Gallery&lt;/h4&gt;
          &lt;button type=&quot;button&quot; class=&quot;close mt-1&quot; aria-label=&quot;Close&quot; (click)=&quot;d('Cross click')&quot;&gt;
            &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;modal-content&quot;&gt;
          &lt;ngb-carousel #myCarousel&gt;
            &lt;ng-template ngbSlide *ngFor=&quot;let img of images&quot; id=&quot;{{img.id}}&quot;&gt;
              &lt;div class=&quot;picsum-img-wrapper&quot;&gt;
                &lt;img src=&quot;{{img.url}}&quot; alt=&quot;Image {{img.id}}&quot;&gt;
              &lt;/div&gt;
            &lt;/ng-template&gt;
          &lt;/ngb-carousel&gt;
        &lt;/div&gt;
      &lt;/ng-template&gt;
      &lt;div class=&quot;row text-center text-lg-left&quot;&gt;
        &lt;div class=&quot;col-lg-3 col-md-4 col-6&quot; *ngFor=&quot;let img of images&quot;&gt;
          &lt;a style=&quot;cursor: pointer&quot; class=&quot;d-block mb-4 h-100&quot;
             (click)=&quot;openModal(myModal); setSlideId(img.id);navigateToSlide(img.id)&quot;&gt;
            &lt;img class=&quot;img-fluid img-thumbnail&quot; src=&quot;{{img.url}}&quot; alt=&quot;&quot;&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/mat-card-content&gt;
  &lt;/mat-card&gt;
  </code></pre>
  <p>My ts code is the following:</p>
  <pre class="lang-ts prettyprint-override"><code>import {Component, ViewChild} from '@angular/core';
  import {NgbCarousel, NgbCarouselConfig, NgbModal} from '@ng-bootstrap/ng-bootstrap';
  
  
  @Component({
    selector: 'kt-image-gallery-thumbnail',
    templateUrl: './image-gallery-thumbnail.component.html',
    styleUrls: ['./image-gallery-thumbnail.component.scss'],
    providers: [NgbCarouselConfig]
  
  })
  
  export class ImageGalleryThumbnailComponent {
  
    selectedSlide = 1;
  
    constructor(private modalService: NgbModal) {
    }
  
    images = [{
      id: 1,
      url: '../../../../assets/media/products/product1.jpg'
    }, {
      id: 2,
      url: '../../../../assets/media/products/product12.jpg'
    }, {
      id: 3,
      url: '../../../../assets/media/products/product11.jpg'
    }];
  
    @ViewChild('myCarousel', {static: false, read: NgbCarousel}) myCarousel: NgbCarousel;
  
    openModal(content: any) {
      this.modalService.open(content);
    }
  
    navigateToSlide(item) {
      console.log(this.myCarousel);
      try {
        this.myCarousel.select('' + item);
      } catch (e) {
        console.log(e);
      }
  
    }
  
    setSlideId(id: number) {
      console.log(id);
      this.selectedSlide = id;
    }
  }
  
  </code></pre>
  <p>Thanks for the help.</p>