default cropper not required only button click - ngx-image-cropper - Angular

Question

With the current code when the image is loaded by default i am getting crop but what i want is when i clicked crop button then only the crop should happen

I checked few in google i got autoCrop:false but I am not sure where I need to put

Here is HTML code

<image-cropper 
          [imageChangedEvent]="imageChangedEvent"
          [maintainAspectRatio]="true"
          [aspectRatio]="4 / 3"
          
          [resizeToWidth]="128"
          format="png"
          (imageCropped)="imageCropped($event)"
          (imageLoaded)="imageLoaded()"
          (cropperReady)="cropperReady()"
          (loadImageFailed)="loadImageFailed()" style="max-height:500px">

Here is the TS code

  //cropping process done here 
   cropImage(imgId) {
    this.currentProcessingImg = imgId;
    var imgObj = this.ulpoadedFiles.find(x => x.imgId === imgId);
   //created dummy event Object and set as imageChangedEvent so it will set cropper on this image 
    var event = {
      target: {
       files: [imgObj.imgFile]
     }
    };
    this.imageChangedEvent = event;        
   }

Thanks in advance

Answer 1

If you want to prevent default image crop on image select/ image change, you can use the autoCrop property [autoCrop]="false" the one you found over google as below:

<image-cropper
                    [autoCrop]="false"
                        [roundCropper]="true"
                        [imageChangedEvent]="imageChangedEvent"
                        [maintainAspectRatio]="true"
                        [aspectRatio]="4 / 4"
                        format="png"
                        (imageCropped)="imageCropped($event)"
                        (imageLoaded)="imageLoaded()"
                        (cropperReady)="cropperReady()"
                        (loadImageFailed)="loadImageFailed()"
                    ></image-cropper>

assuming your component code is having logic for button click event to trigger the Image crop event.