Repository files navigation

CropperJS integration for Angular

https://matheusdavidson.github.io/angular-cropperjs/

1- Install the library:

$ npm install angular-cropperjs --save

2- Import and loadAngularCropperjsModule in the module you want to use, for exampleAppModule:

import{BrowserModule}from'@angular/platform-browser';import{NgModule}from'@angular/core';import{AppComponent}from'./app.component';//// Import angular-cropperjsimport{AngularCropperjsModule}from'angular-cropperjs';@NgModule({declarations:[AppComponent],imports:[BrowserModule,//// Load angular-cropperjsAngularCropperjsModule],providers:[],bootstrap:[AppComponent]})exportclassAppModule{}

3- Use the component in your template like this:

<!-- You can now use angular-cropper component in app.component.html --><angular-cropper[cropperOptions]="config"[imageUrl]="imageUrl"></angular-cropper>

Using CropperJS methods:

Use @ViewChild in your component to get the element:

In your app.component.html

<angular-cropper#angularCropper..></angular-cropper>

And in your app.component.ts

//// Import CropperComponentimport{CropperComponent}from'angular-cropperjs';//// Get with@ViewChild@ViewChild('angularCropper')public angularCropper:CropperComponent;

Then just call the CropperJS method you want:

anywhere in your app.component.ts

//// Lets try to zoomthis.angularCropper.cropper.zoom(0.1);

This project was generated withAngular CLI version 6.0.8.

Runng serve for a dev server. Navigate tohttp://localhost:4200/. The app will automatically reload if you change any of the source files.

Runng generate component component-name to generate a new component. You can also useng generate directive|pipe|service|class|guard|interface|enum|module.

Runng build to build the project. The build artifacts will be stored in thedist/ directory. Use the--prod flag for a production build.

Runng test to execute the unit tests viaKarma.

Runng e2e to execute the end-to-end tests viaProtractor.

To get more help on the Angular CLI useng help or go check out theAngular CLI README.

MIT ©Matheus Davidson