Getting started
Install the package, drop the standalone component into a template, and pick a mode. The editor is signal-driven, standalone, OnPush and zoneless-compatible.
Installation
The library ships ESM only. Fabric.js is a runtime dependency you install alongside it; Angular is a peer dependency.
Optional add-ons, only if you use the matching feature: @imgly/background-removal + onnxruntime-web for the AI background tools, and heic2any for HEIC/HEIF import. Without them those features simply don't appear.
npm i @ascentsparksoftware/angular-image-editor fabric
# optional — AI background tools
npm i @imgly/background-removal onnxruntime-web
# optional — HEIC / HEIF import
npm i heic2anyQuick start
Import AspImageEditor, give the host a size, and listen for the saved Blob. That's the whole integration.
import { Component } from '@angular/core';
import { AspImageEditor } from '@ascentsparksoftware/angular-image-editor';
@Component({
selector: 'app-photo',
imports: [AspImageEditor],
template: `
<asp-image-editor mode="advanced" height="520px" (saved)="onSaved($event)" />
`,
})
export class PhotoComponent {
onSaved(blob: Blob): void {
// upload or preview the edited image
}
}Modes
One input switches the whole experience: viewer (read-only), basic (compact card / modal), advanced (full workspace, curated tools) and full (every tool + filter).
<asp-image-editor mode="viewer" [src]="url" />
<asp-image-editor mode="basic" [src]="url" />
<asp-image-editor mode="advanced" [src]="url" />
<asp-image-editor mode="full" [src]="url" />