Getting Started
Forms
Components
78
Action Required
Alert
Announcement
Avatar
Badge
Block Loader
Bottom Sheet
Calendar
Card
Card Overlay
Carousel
Chips
Code Highlighter
Color Picker
Color Switcher
Command Bar
Comment Editor
Comparison Slider
Confirm
Content Fade
Cookie Popup
Crop
Datepicker
Dialog
Digit Roller
Divider
Drawer
Emoji Picker
Empty State
Events
Expand
Expansion Panel
File Type
Filter Builder
Gauge
Grid
Guided Tour
Headless Stepper
Icon
Image Placeholder
Image Resizer
Image Viewer
Image Zoom Viewer
Incidents
Keyboard
Layout
List
Marquee
Menu
Notifications
Paginator
Panel
Popover
Progress Bar
Progress Spinner
Resizable Container
Screen Loader
Sidenav
Signature Pad
Skeleton
Slider
Snackbar
Sort
Split Pane
Step Tracker
Stepper
Suggestions
Table
Tabs
Text Editor
Thumbnail Maker
Tiles
Timeline
Timepicker
Toolbar
Tooltip
Tree
Upload
Video Viewer
Libraries
Crop
Crop lets users select a crop area on top of an existing image or visual preview.
Use it when the user needs to move and resize a rectangle or circle selection before another part of the app applies the real image crop. The component emits the selected area as pixel values, percentages, and container dimensions through selectionApplied.
- Interactive crop areaUsers can move the selection and resize it with visible handles.
- Rectangle or circle shapeUse rectangle for covers and thumbnails, or circle for avatar-style crops.
- Coordinates onlyThe component does not upload files, save images, or process the final bitmap.
Use it for:
Avatar dialogs, cover image forms, thumbnail preparation, media management screens, and content editor flows where another service or canvas step performs the actual crop.
The NgStarter Angular Crop component lets you let users choose a rectangle or circle crop area on top of an existing image or visual preview. Use for avatar dialogs, cover image forms, thumbnail preparation, media management screens, and content editor flows where the user chooses the visible crop area. It includes examples for Basic image crop.
Basic image crop
Use Crop to place a movable selection over an existing visual preview. The component emits the chosen rectangle or circle coordinates; the app is responsible for upload, preview state, and final image processing.
Rectangle
Using this component in production?
Source code, templates, and commercial support
NgStarter includes source code, admin dashboard templates, and commercial support.