How to build an Image Cropper Control in Angular with Material and ngx-image-cropper

Grab my new course 'Angular Firebase Authentication: Create Full Sign up App' with 50% off here:

In this tutorial, we'll build up an image cropper control in Angular, allowing your users to crop their photos before uploading to your server!

The complete code for this tutorial can be found at this following github repository:

Follow me on:

00:00 Introduction
01:15 Setting up the Angular project
02:30 Creating the image control component
04:20 Styling the image control component
05:40 Adding image selection
07:20 Creating the cropper dialog component
10:30 Handling cropping results
13:40 Displaying cropped image
15:50 Resizing cropped image
17:40 Emitting cropped image
18:20 Conclusion

Cheers :) Grab my new course 'Angular Firebase Authentication: Create Full Sign up App' with 50% off here:

[khijdmy]

start teaching angular from basics for beginners that would be a huge help

[gmexpert]

how can i resize the image that will get cropped. For smaller images the cropper is really small it would be really helpful if we could resize the original image before loading it on the cropper

[gunderaopatil]

Will ngx image cropper works for already uploaded image . ? I mean once you upload and click on that and cropp it

[sandeeptiwari]

how to store url image in form of base64 encoded?

[gekoskipatric]

will this work with an ng-module based app?

[shivajitiwari]

Will it support keyboard arrows to crop the image.

[moudjahidinesalissou]

Can I use it with bootstrap instead of Angular Material?