Image Crop Image not Display in Model Popup

[ChirantanPatel]

when I tag use in the page then it works very good. but when display in model Popup then tag in image not display.

I'm using this component inside ng-bootstrap Model. The image data is obtained from a file upload and then I try to init the cropper inside the modal.

this is my code.

<ng-template #content let-c="close" let-d="dismiss">

            <div class="modal-header">
              <h4 class="modal-title">Upload Profile</h4>
              <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">

              <div class="row">
                <div class="col-12">
                  <div class="card">
                    <div class="card-body">
                      <div class="col-md-12">
                        <div class="row">

                          <div class="form-group col-md-6">
                            <div class="fileUpload">
                              <span *ngIf="!data.image">
                                <img src="../assets/images/users/NoImage.png" (click)="OpenImageModel()" class="img-circle" width="150">
                              </span>
                              <span *ngIf="data.image">
                                <img [src]="data.image" class="img-circle" (click)="OpenImageModel()" width="150">
                              </span>
                              <input id="custom-input" type="file" class="upload" (change)="fileChangeListener($event)">
                            </div>
                          </div>

                          <div class="form-group col-md-6">
                            <div>
                              <img-cropper #cropper [image]="data" [settings]="cropperSettings"></img-cropper>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
            </div>
          </ng-template>

---

fileChangeListener($event) { debugger var image: any = new Image(); var file: File = $event.target.files[0]; var myReader: FileReader = new FileReader(); var _this = this; myReader.onloadend = function (loadEvent: any) { image.src = loadEvent.target.result; _this.cropper.setImage(image);

};
myReader.readAsDataURL(file);

}

[ChirantanPatel]

close