Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matheusdavidson/angular-cropperjs
CropperJS integration for Angular +6
https://github.com/matheusdavidson/angular-cropperjs
angular angular-component angular-library angular2 angular4 cropper cropperjs image
Last synced: about 1 month ago
JSON representation
CropperJS integration for Angular +6
- Host: GitHub
- URL: https://github.com/matheusdavidson/angular-cropperjs
- Owner: matheusdavidson
- License: mit
- Created: 2017-09-13T20:00:09.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-01T03:25:48.000Z (about 1 year ago)
- Last Synced: 2024-11-09T23:37:45.552Z (about 1 month ago)
- Topics: angular, angular-component, angular-library, angular2, angular4, cropper, cropperjs, image
- Language: TypeScript
- Homepage:
- Size: 2.19 MB
- Stars: 109
- Watchers: 7
- Forks: 69
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - angular-cropperjs - [Cropper.js](https://github.com/fengyuanchen/cropperjs) integration for Angular 6+. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-cropperjs - <b><code> 13171⭐</code></b> <b><code> 2418🍴</code></b> [Cropper.js](https://github.com/fengyuanchen/cropperjs)) integration for Angular 6+. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-cropperjs - <b><code> 13001⭐</code></b> <b><code> 2401🍴</code></b> [Cropper.js](https://github.com/fengyuanchen/cropperjs)) integration for Angular 6+. (Table of contents / Third Party Components)
README
# angular-cropperjs
[CropperJS](https://fengyuanchen.github.io/cropperjs/) integration for Angular
# Demo
https://matheusdavidson.github.io/angular-cropperjs/
## How to use
1- Install the library:
```bash
$ npm install angular-cropperjs --save
```
2- Import and load `AngularCropperjsModule` in the module you want to use, for example `AppModule`:
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
//
// Import angular-cropperjs
import { AngularCropperjsModule } from 'angular-cropperjs';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
//
// Load angular-cropperjs
AngularCropperjsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
```
3- Use the component in your template like this:
```html
```
**Using CropperJS methods:**
Use @ViewChild in your component to get the element:
_In your app.component.html_
```html
```
_And in your app.component.ts_
```js
//
// Import CropperComponent
import { 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_
```js
//
// Lets try to zoom
this.angularCropper.cropper.zoom(0.1);
```
# Development
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.8.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
## License
MIT © [Matheus Davidson](mailto:[email protected])