Angular 13 Image Upload, Crop Example

Angular Image Cropper Example

  • Step 1:Configure an Angular Environment
  • Step 2: Bootstrap should be installed
  • Step 3: NGX Image Cropper Package to be installed
  • Step 4: ImageCropperModule should be registered in the App Module
  • Step 5: Incorporate an image cropper into your Angular application
  • Step 6: Launch the Development Server

Execute command to install the package:

npm install bootstrap
Add NGX Image Cropper Package
npm install ngx-image-cropper

In the App Module, add the ImageCropperModule.

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ImageCropperModule } from 'ngx-image-cropper';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Add code into the 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 {
imageChange: any = '';
cropImagePreview: any = '';
    onFileChangeEvent(event: any): void {
        this.imageChange = event;
    cropImage(e: ImageCroppedEvent) {
        this.cropImagePreview = e.base64;

Open the app.component.html file and paste the following code in it:

<div class="container mt-5 text-center">
  <h3 class="mb-5">Angular Image Crop Example</h3>
  <div class="col-md-12">
    <input type="file" (change)="onFileChangeEvent($event)" />
  <div class="col-md-8">
      [aspectRatio]="4 / 4"
  <div class="col-md-4">
    <h6>Demonstration Image</h6>
    <img [src]="cropImagePreview" />

Let’s now run the project with the following command.

ng serve -o

Submit a Comment

Your email address will not be published.


Select Categories