Cropper.js at angular 2: cropper displays the previos image

Question

I build ionic2 application - based on angular 2. In my app I use Cropper.js library for let user edit the images he loaded.

Now I have a problem. When user load new picture, I show it at the main container and open the crop-box for this image.

But the crop-box show the previous image which was at the container.

The only solution that worked for me is to open the crop by setTimeout, but it is not good solution, as we know.

Any idea else?

Here is my code:

HTML - the container element:

<div class="selected-image">
    <img  *ngIf="currentImage.src != null" #selectedPhoto [src]="currentImage.src"/>
</div>

Now, after user click a button to add picture from the camera (by cordova plugin), and I get the image url, I push the picture to pictures array and then set currentImage variable to hold the new image.

Here is my typeScript code, it also have viewChild to hold the container. Notice to the setTimeout block, now its is work but if I unwrap the code from setTimeout wrapper - it open the crop-box with the previous picture.

I also tried to change it to NgZone.run wrapper, but it didn't help.

export class myClass {

       @ViewChild('selectedPhoto') input: ElementRef;
       pictures: PictureData[] = new Array();
       mainImage: PictureData = new PictureData();
       private cropper: Cropper;

       constructor(public _zone: NgZone) {}


      function addPicture(){
          var self = this;
          Camera.getPicture({
              destinationType: Camera.DestinationType.DATA_URL,
              sourceType: Camera.PictureSourceType.CAMERA,
              quality: 95,
              targetHeight: 400,
              targetWidth:400
          }).then((imageURI) => {
                  var picture = {src:imageURI};
                  self._zone.run(() => {
                      self.pictures.push(picture);
                      self.currentImage = picture;
                      setTimeout(() => {
                         if (this.cropper && this.cropper['canvas']) {
                             this.cropper.destroy();
                         }
                         if (!this.cropper || !this.cropper['canvas']) {
                              this.cropper = new Cropper(this.input.nativeElement, {
                                  aspectRatio: 1 / 1,
                                  dragMode: 'crop',
                                  modal: true,
                                  guides: false,
                                  center: true,
                                  highlight: false,
                                  background: false,
                                  autoCrop: true,
                                  autoCropArea: 0.9,
                                  responsive: true,
                                  checkCrossOrigin: false,
                                  crop: (e: Cropper.CropperCustomEvent) => {

                                  }
                            });
                         }
                      }, 2000);
                });
        });

   }

}

P.S. If you are user with more then 1500 reputation, please, think about create new tag for 'cropper.js'.