angular2-resizing-cropping-image plugin reusability.

[sarath3940]

Can I use angular2-resizing-cropping-image plugin for cropping two images, one at a time??

[alyleui]

Hi! @sarath3940, of course it can

example:

...
<ly-cropping #cropping1 [config]="myConfig"></ly-cropping>
<button (click)="cropping1.crop()">crop 1</button>

<ly-cropping #cropping2 [config]="myConfig"></ly-cropping>
<button (click)="cropping2.crop()">crop 2</button>

<button (click)="cropAll()">crop All</button>
or
<button (click)="cropping1.crop();cropping2.crop()">crop All</button>

...
export class ResizingCroppingImagesExample01Component {
  ...
  @ViewChildren(LyResizingCroppingImages) imgs: QueryList<LyResizingCroppingImages>;
  ...
  ngAfterViewInit() {
    this.imgs.forEach(img => console.log(img));
  }
  cropAll() {
    this.imgs.forEach(img => img.crop());
  }
}

[sarath3940]

Thank you! @alyleui. It worked. :)

[sarath3940]

Hi. As you specified: <button (click)="cropping1.crop();cropping2.crop()">crop All

".crop()" is an inbuilt method. Can I use a user defined method like:

<button (click)="cropping1.cropUser()">crop

Please let me know. I have tried doing that. And it's throwing an error.

[alyleui]

".crop()" is an method of LyResizingCroppingImages

[alyleui]

Could you create a method in your component

export class ResizingCroppingImagesExample01Component {
  ...
  @ViewChildren(LyResizingCroppingImages) imgs: QueryList<LyResizingCroppingImages>;
  ...
  ngAfterViewInit() {
    this.imgs.forEach(img => console.log(img));
  }
  cropAll() {
    this.imgs.forEach(img => img.crop());
  }
  cropImg1() {
    this.imgs.first.crop();
  }
  cropImg2() {
    this.imgs.last.crop();
  }
}

<button (click)="cropImg1()">crop image 1</button>
<button (click)="cropImg2()">crop image 2</button>

[sarath3940]

IT WORKED. Thank you dude, once again. And thank's for your quick response.