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:
www.udemy.com/course/angular-... #Angular #Image #Cropper
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:
github.com/thisiszoaib/angula...
Follow me on:
Twitter - / zoaibdev
Facebook - / thisiszoaib
LinkedIn - / zoaib-khan-b6456815
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:
www.udemy.com/course/angular-...

[@steve-o2198]

Great video, thank you so much!

[@ZoaibKhan]

You're welcome, Steve!

[@techwake360]

awesome

[@JB-sv8oh]

great video! thank u s much

[@ZoaibKhan]

You're welcome 🤗

[@gmexpert3530]

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

[@user-kh2ij9dm7y]

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

[@ZoaibKhan]

Ok, noted!

[@sandeeptiwari602]

how to store url image in form of base64 encoded?

[@ZoaibKhan]

If I recall, there is a property for that in the cropper package we're using

[@gunderaopatil476]

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

[@ZoaibKhan]

Yup, from their official docs, you can use the imageUrl input parameter to specify the image.
github.com/Mawi137/ngx-image-cropper?tab=readme-ov-file#inputs

[@shivajitiwari7047]

Will it support keyboard arrows to crop the image.

[@ZoaibKhan]

I'm not sure about this

[@gekoskipatric]

will this work with an ng-module based app?

[@ZoaibKhan]

Yes, it should work

[@moudjahidinesalissou9011]

Can I use it with bootstrap instead of Angular Material?

[@ZoaibKhan]

Sure, just use the bootstrap components such as buttons and the modal dialog instead of the material ones!