Angular 2 ng2-img-cropper not showing component


I want to crop 3 images then upload them cropped using Angular 2. I integrated Angular 2 Image Cropper "ng2-img-cropper" but I didn't get it to work.

When I run the application and go the page where the cropper is implemented I only see a small image square and nothing happens when I click or drag it and there is no errors in the console. Figure : Empty image square

I am using "[email protected]".

This is how I proceeded for the implementation. I referred to this Github link I added this into the HTML

    <img-cropper [image]="data" [settings]="cropperSettings"></img-cropper><br>
    <img [src]="data.image" [width]="cropperSettings.croppedWidth" [height]="cropperSettings.croppedHeight">

And this into the class

import {ImageCropperComponent, CropperSettings} from 'ng2-img-cropper';

data: any; cropperSettings: CropperSettings;

constructor() {

    this.cropperSettings = new CropperSettings();
    this.cropperSettings.width = 100;
    this.cropperSettings.height = 100;
    this.cropperSettings.croppedWidth =100;
    this.cropperSettings.croppedHeight = 100;
    this.cropperSettings.canvasWidth = 400;
    this.cropperSettings.canvasHeight = 300; = {};


Thank you.

Link to the issue Issue

Basically there are two reasons by which your component is not showing first one either your are not listing your component in the list or directives or either your are not binding properly of src in img. otherwise angular2 image cropper is working fine for me see here.

see here also

if still you have any error kindly reproduce your error in attached plunker.

This video can help you solving your question :)
By: admin