cropper is not working when i am trying to use in ng-template

[Vishwjeet9097]

<button class="btn btn-primary" (click)="openImageModal(imageModal)">Launch demo modal

<ng-template #imageModal let-modal>

Modal title

        </div>
        <div class="d-flex justify-content-between align-items-center flex-wrap">
          <div class="d-flex align-items-center flex-wrapp me-2 mt-3">
            <button class="btn btn-primary crop mb-2 mb-md-0" (click)="cropImage()">Crop me</button>
          </div>
          <div class="mb-4 mb-md-0 mt-3">
            <a href="" class="btn btn-outline-primary download" download="imageName.png">Download croped image</a>
          </div>
        </div>
      </div>
      <div class="col-md-12 ms-auto">
        <h6 class="text-muted mb-3">Cropped Image: </h6>
        <img class="w-100 cropped-img mt-2" src="{{resultImage}}" alt="">
      </div>
    </div>
  </div>
</div>

================================= typescript ================================= @ViewChild('angularCropper') public angularCropper: CropperComponent;

imageUrl: any = 'assets/images/others/placeholder.jpg';
resultImage: any;

// Plugin configuration
config = {
zoomable: false
};

handleFileInput(event: any) {
if (event.target.files.length) {
var fileTypes = ['jpg', 'jpeg', 'png']; //acceptable file types
var extension = event.target.files[0].name.split('.').pop().toLowerCase(), //file extension from input file
isSuccess = fileTypes.indexOf(extension) > -1; //is extension in acceptable types
if (isSuccess) { //yes
// start file reader
const reader = new FileReader();
const angularCropper = this.angularCropper;
reader.onload = (event) => {
if (event.target?.result) {
angularCropper.imageUrl = event.target.result;
// this.imageUrl = event.target.result;
}
};
reader.readAsDataURL(event.target.files[0]);
} else { //no
alert('Selected file is not an image. Please select an image file.')
}
}
}

cropImage() {
console.log('clicked', this.angularCropper.cropper.getCroppedCanvas().toDataURL());
const resultImage = this.angularCropper.cropper.getCroppedCanvas().toDataURL();
console.log('clicked', this.resultImage);
this.imageUrl = this.angularCropper.cropper.getCroppedCanvas().toDataURL();
let dwn: HTMLElement = document.querySelector('.download') as HTMLElement;
dwn.setAttribute('href', this.angularCropper.cropper.getCroppedCanvas().toDataURL());
}

[matheusdavidson]

Hi there, can you please post the entire html and ts file, properly formatted so I can debug.

It looks like you didn't load the ViewChild("angularCropper") the right way, did you add #angularCropper to the component in the view?