Closed javsal closed 6 years ago
Hi! @javsal this component is now in alyle ui try this
npm i alyle-ui
// app.module.ts
import { LyResizingCroppingImageModule } from 'alyle-ui/resizing-cropping-images';
@NgModule({
imports: [
...
LyResizingCroppingImageModule
],
})
// app.component.ts
import { LyResizingCroppingImages, LyResizingCroppingImagesConfig, CroppedImage } from 'alyle-ui/resizing-cropping-images';
@Component({
selector: 'resizing-cropping-images-example',
templateUrl: './resizing-cropping-images-example.component.html',
styleUrls: ['./resizing-cropping-images-example.component.css']
})
export class ResizingCroppingImagesExample01Component {
@ViewChild(LyResizingCroppingImages) img: LyResizingCroppingImages;
myConfig: LyResizingCroppingImagesConfig = {
width: 150, // Default `250`
height: 150 // Default `200`
};
constructor() { }
crop() {
const imgCropped: CroppedImage = this.img.crop(); // return img cropped
}
}
<div>
<input #_fileInput type="file" (change)="cropping.selectInputEvent($event)" accept="image/*">
</div>
<div class="resize-image">
<ly-cropping #cropping
[config]="myConfig">
<span>Drag and drop image</span>
</ly-cropping>
<button *ngIf="cropping.isLoaded" (click)="crop()">crop</button>
</div>
<img *ngIf="cropping.isCropped" [src]="cropping.result">
Unexpected value 'LyResizingCroppingImageModule in node_modules/angular2-resizing-cropping-image/index.d.ts'. Please add a @NgModule annotation.