Home Angular 8 Angular 9 image cropper working example

Angular 9 image cropper working example

by therichpost
0 comment
Angular 9 image cropper working example

Hello to all, welcome to therichpost.com. In this post, I will show you, Angular 9 image cropper working example.

Angular 9 image cropper working example
Angular 9 image cropper working example

Post Working:

In this post, I am showing how to crop image in Angular 9.

Here is the working code snippet and please follow carefully:

1. Very first, here are common basics steps to add angular 9 application on your machine:

$ npm install -g @angular/cli

$ ng new angularimage // Set Angular9 Application on your pc

cd angularimage // Go inside project folder

ng serve // Run project

http://localhost:4200/  //Check working Local server


2. Now run below command into your terminal to include image cropper package into your angular 9 application:

npm install ngx-image-cropper --save


3. Now add below code into your app.module.ts file:

import { ImageCropperModule } from 'ngx-image-cropper';
    imports: [


4. Add, below code into your app.component.ts file:

import { ImageCroppedEvent } from 'ngx-image-cropper';

export class YourComponent {

    imageChangedEvent: any = '';
    croppedImage: any = '';
    fileChangeEvent(event: any): void {
        this.imageChangedEvent = event;
    imageCropped(event: ImageCroppedEvent) {
        this.croppedImage = event.base64;
    imageLoaded() {
        // show cropper
    cropperReady() {
        // cropper ready
    loadImageFailed() {
        // show message


5. Finally add below code into app.component.html file:

    [aspectRatio]="4 / 3"

<img [src]="croppedImage" />


This is it and if you have any kind of query then please let me know. Don’t forget to run ng serve command.


Thank you

You may also like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.