Angular 9/8 Image Upload and Cropper with Preview Example

By Hardik Savani | June 17, 2020 | Category : Angular

I am going to explain you example of angular 9 image cropper with Crop, Zoom, Scale, and Preview functionality while uploading. In this article, we will implement a image upload with crop in angular 9. i would like to show you angular 9/8 image upload with crop example. We will use ngx-image-cropper angular 9 example. follow bellow step for angular 9 image cropper example step by step.

If you need to use image upload with crop then you can easily use ngx-image-cropper npm package. it will provide you Cropping, Zooming, Scaling, and Preview functionality while uploading time. it's very easily use with your angular 8 and angular 9 application.

In this example, i will give you step by step explanation how you can image upload in crop in angular 8/9 application. you can also see bellow screenshot for demo.


Step 1: Create New App

You can easily create your angular app using bellow command:

ng new ngImageCrop

Step 2: Install Npm Packages

In this step, we will install ngx-image-cropper npm package for upload image crop function in angular. so let's run both command:

npm install ngx-image-cropper --save

Step 3: Import ImageCropperModule

Now, here we will import ImageCropperModule from ngx-image-cropper and then we add on declarations part. so let's update app.module.ts file as like bellow:


import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

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


declarations: [



imports: [




providers: [],

bootstrap: [AppComponent]


export class AppModule { }

Step 4: Update Component ts File

Here, we will update app.component.ts file here, in this file we will write fileChangeEvent(), imageCropped(), imageLoaded(), cropperReady() and loadImageFailed() that provided by ngx-image-cropper.

You can update as bellow app.component.ts file.


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

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


selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']


export class AppComponent {

title = 'ngImageCrop';

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 */



Step 5: Update HTML File

I used bootstrap class on this form. if you want to add than then follow this link too: Install Boorstrap 4 to Angular 9.

Here, we will update html file as like bellow, so update it as like bellow:


<div class="container">

<div class="card">

<div class="card-header">

Angular Crop Image Tutorial Example -


<div class="card-body">

<input type="file" (change)="fileChangeEvent($event)" />

<div class="row" style="margin-top: 15px;">

<div class="text-center col-md-8">

<h5>Crop Image</h5>




[aspectRatio]="4 / 4"








<div class="text-center col-md-4">


<img [src]="croppedImage" />






Now you can run angular 9 app:

Run Angular App:

ng serve

I hope it can help you...

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: