diff --git a/src/api/docs/demos/cropper-dialog.ts.html b/src/api/docs/demos/cropper-dialog.ts.html index 8a3a8d038..cdb9ea1a1 100644 --- a/src/api/docs/demos/cropper-dialog.ts.html +++ b/src/api/docs/demos/cropper-dialog.ts.html @@ -1,4 +1,4 @@ -
import { Component, ChangeDetectionStrategy, Inject, ViewChild, AfterViewInit, NgZone } from '@angular/core';
+
import { Component, ChangeDetectionStrategy, Inject, ViewChild, AfterViewInit } from '@angular/core';
 import { StyleRenderer, WithStyles, lyl, ThemeRef, ThemeVariables } from '@alyle/ui';
 import { LyDialogRef, LY_DIALOG_DATA } from '@alyle/ui/dialog';
 import { STYLES as SLIDER_STYLES } from '@alyle/ui/slider';
@@ -8,7 +8,6 @@
   ImgCropperEvent,
   ImgCropperErrorEvent
 } from '@alyle/ui/image-cropper';
-import { take } from 'rxjs/operators';
 
 const STYLES = (_theme: ThemeVariables, ref: ThemeRef) => {
   ref.renderStyleSheet(SLIDER_STYLES);
@@ -55,14 +54,14 @@
   constructor(
     @Inject(LY_DIALOG_DATA) private event: Event,
     readonly sRenderer: StyleRenderer,
-    public dialogRef: LyDialogRef,
-    private _ngZone: NgZone
+    public dialogRef: LyDialogRef
   ) { }
 
   ngAfterViewInit() {
-    this._ngZone.onStable
-    .pipe(take(1))
-    .subscribe(() => this.cropper.selectInputEvent(this.event));
+    // Load image when dialog animation has finished
+    this.dialogRef.afterOpened.subscribe(() => {
+      this.cropper.selectInputEvent(this.event);
+    });
   }
 
   onCropped(e: ImgCropperEvent) {
diff --git a/src/app/docs/components/image-cropper-demo/cropper-with-dialog/cropper-dialog.ts b/src/app/docs/components/image-cropper-demo/cropper-with-dialog/cropper-dialog.ts
index 2c593ec21..b790a3401 100644
--- a/src/app/docs/components/image-cropper-demo/cropper-with-dialog/cropper-dialog.ts
+++ b/src/app/docs/components/image-cropper-demo/cropper-with-dialog/cropper-dialog.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, Inject, ViewChild, AfterViewInit, NgZone } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Inject, ViewChild, AfterViewInit } from '@angular/core';
 import { StyleRenderer, WithStyles, lyl, ThemeRef, ThemeVariables } from '@alyle/ui';
 import { LyDialogRef, LY_DIALOG_DATA } from '@alyle/ui/dialog';
 import { STYLES as SLIDER_STYLES } from '@alyle/ui/slider';
@@ -8,7 +8,6 @@ import {
   ImgCropperEvent,
   ImgCropperErrorEvent
 } from '@alyle/ui/image-cropper';
-import { take } from 'rxjs/operators';
 
 const STYLES = (_theme: ThemeVariables, ref: ThemeRef) => {
   ref.renderStyleSheet(SLIDER_STYLES);
@@ -55,14 +54,14 @@ export class CropperDialog implements WithStyles, AfterViewInit {
   constructor(
     @Inject(LY_DIALOG_DATA) private event: Event,
     readonly sRenderer: StyleRenderer,
-    public dialogRef: LyDialogRef,
-    private _ngZone: NgZone
+    public dialogRef: LyDialogRef
   ) { }
 
   ngAfterViewInit() {
-    this._ngZone.onStable
-    .pipe(take(1))
-    .subscribe(() => this.cropper.selectInputEvent(this.event));
+    // Load image when dialog animation has finished
+    this.dialogRef.afterOpened.subscribe(() => {
+      this.cropper.selectInputEvent(this.event);
+    });
   }
 
   onCropped(e: ImgCropperEvent) {
diff --git a/src/lib/image-cropper/image-cropper.ts b/src/lib/image-cropper/image-cropper.ts
index 15921615f..842dc3ec5 100644
--- a/src/lib/image-cropper/image-cropper.ts
+++ b/src/lib/image-cropper/image-cropper.ts
@@ -404,8 +404,7 @@ export class LyImageCropper implements OnDestroy {
 
           this.cd.markForCheck();
         },
-        (error) => {
-          console.log(error);
+        () => {
           const cropEvent: ImgCropperErrorEvent = {
             name: fileName,
             size: fileSize,
@@ -663,9 +662,7 @@ export class LyImageCropper implements OnDestroy {
 
       img.onerror = err => observer.error(err);
       img.onabort = err => observer.error(err);
-      img.onload = () => {
-        observer.next(null!);
-      };
+      img.onload = () => observer.next(null!);
     })
     .pipe(take(1), takeUntil(this._destroy))
     .subscribe(
@@ -679,9 +676,8 @@ export class LyImageCropper implements OnDestroy {
           .onStable
           .pipe(take(1), takeUntil(this._destroy))
           .subscribe(
-            () => this._ngZone.run(() => setTimeout(() => this._positionImg(cropEvent, fn), 0))
+            () => setTimeout(() => this._ngZone.run(() => this._positionImg(cropEvent, fn)))
           );
-
       },
       () => {
         (cropEvent as ImgCropperErrorEvent).error = ImgCropperError.Type;