Angular 2 ng2-img-cropper not showing component

Question!

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 https://github.com/cstefanache/angular2-img-cropper I added this into the HTML

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

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;

    this.data = {};

}

Thank you.

Link to the issue Issue



Answers
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.

https://embed.plnkr.co/V91mKCNkBQZB5QO2MUP4/

see here also

http://stackoverflow.com/a/39096831/5043867

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



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