Angular lose ViewChild template inside another one

Question

Im trying to put my cropper element (angular-cropperjs) inside my bootstrap modal . But the issue that when my cropper block is outside of the modal I can still read my cropper elem console.log(this.angularCropper) , but when I put inside the modal block it gives me undefined. I guess it is related to ViewChild() but can't understand what exactly should I do.
componenet.ts

import { Component, OnInit, ViewChild, TemplateRef, ElementRef } from '@angular/core';
import { CropperComponent } from 'angular-cropperjs'
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
@Component({
  selector: 'app-cropper',
  templateUrl: './cropper.component.html',
  styleUrls: ['./cropper.component.scss']
})
export class CustomCropperComponent implements OnInit {
  @ViewChild('modal') modal: ElementRef;
  @ViewChild('angularCropper') angularCropper: CropperComponent;

  modalRef: BsModalRef;

  public imageUrl: string = '';
  public croppedResult: string = '';

  constructor(private modalService: BsModalService) { }

  ngOnInit(): void {
  }

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, { id: 2, class: 'modal-dialog-centered' });
  }

  onSelectFile(event) {
    if (event.target.files && event.target.files[0]) {
      const reader = new FileReader();
      reader.readAsDataURL(event.target.files[0]);
      reader.onload = () => {
        this.imageUrl = reader.result as string;
      }
    }
  }

  getCroppedImage() {
    console.log(this.angularCropper) // see only outside block, inside modal returns undefined
    this.angularCropper.cropper.getCroppedCanvas().toBlob((blob) => {
      const reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onload = () => {
        this.croppedResult = reader.result as string;
      }
    }, 'image/jpeg', 0.95)
    console.log(this.croppedResult)
  }

}

component.html

<div class="image__upload" (click)="openModal(modal)">
    <div class="image__upload-text">
        <img src="assets/img/vector.png" alt="">
        <p class="image__upload-text-header">Add Photo</p>
        <p class="image__upload-text-description">(size is less than 1mb)</p>
    </div>
    <!-- <input id="file-input" type="file" (change)="choosePhoto($event.target.files)" /> -->
</div>

<ng-template #modal>
    <div class="modal-header">
        <h4 class="modal-title pull-left">Modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
<!-- Not Available to read  -->
<img src="{{croppedResult}}" alt="">
<input type="file" (change)="onSelectFile($event)" />
<angular-cropper #angularCropper [imageUrl]="imageUrl"></angular-cropper>
<button (click)="getCroppedImage()">Crop</button>

    </div>
</ng-template>

<!-- Available to read -->
<img src="{{croppedResult}}" alt="">
<input type="file" (change)="onSelectFile($event)" />
<angular-cropper #angularCropper [imageUrl]="imageUrl"></angular-cropper>
<button (click)="getCroppedImage()">Crop</button>

question from:https://stackoverflow.com/questions/65901431/angular-lose-viewchild-template-inside-another-one

Answer 1

The issue was that ViewChild is not working in ng-template , so I have removed ng-template and open modal from another component , reference to solution link