Angular cropper

Angular cropper working example on codesandbox.


to install the component you must have npm. Navigate to the root of your project, and enter the command below

npm i @jsuites/cropper

Image cropper


import { AfterViewInit, Component, ElementRef, Input, ViewChild } from "@angular/core";
import "jsuites/dist/jsuites.layout.css";

    selector: "app-cropper",
    templateUrl: "./cropper.component.html",
    styleUrls: ["./cropper.component.css"]

export class CropperComponent implements AfterViewInit {
    properties: Object;
    @ViewChild("crop") crop: ElementRef;
    ngAfterViewInit() {


import { Component } from "@angular/core";

    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]

export class AppComponent {
    imageUrl = "";

    setImage = (newValue) => {
        this.imageUrl = newValue;

    handleCropperChange = (el, imageElement) => {


<div #crop></div>

Importing the component

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { CropperComponent } from "./cropper/cropper.component";

    declarations: [AppComponent, CropperComponent],
    imports: [BrowserModule],
    providers: [],
    bootstrap: [AppComponent]

export class AppModule {}

Using the component

<h3>Angular cropper example</h3>
    value: imageUrl,
    onchange: handleCropperChange,
    area: [300, 300],
    crop: [100, 100]
<span> Selected image base64: {{ imageUrl }}</span>

NOTE: Make sure to import the cropper.js and cropper.css in your angular.json or angular-cli.json

"styles": ["styles.css", "node_modules/@jsuites/cropper/cropper.css"], "scripts": ["node_modules/@jsuites/cropper/cropper.js"]