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 area
Users can move the selection and resize it with visible handles.
Rectangle or circle shape
Use rectangle for covers and thumbnails, or circle for avatar-style crops.
Coordinates only
The 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.

Prop	Type	Default
minWidth Minimum width of the crop selection	number	100
minHeight Minimum height of the crop selection	number	100
shape Shape of the crop selection	'rectangle' \| 'circle'	'rectangle'

Event	Description
selectionApplied	Emitted when the crop selection is changed or initialized

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.

View pricing →Explore admin templates

Crop

Source code, templates, and commercial support

Build the surrounding workflow