Angular

Angular Image Editor

In Angular you mount Embed Editor from a standalone component. mountEditor, from the standalone entry, takes the element of an ElementRef and the options, draws the editor there and returns update and destroy. Mount it in ngAfterViewInit, send changes from ngOnChanges and destroy it in ngOnDestroy.

Open in the Playground Read the Docs

Install

Add It to Your Angular App

Free is on public npm, with no key. Lite and Full install from the private registry with your license key: put the two lines in your project's .npmrc, keep the key in an environment variable, then install by name.

Terminal

npm install @embededitor/free

photo-editor.component.ts

import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';
import { mountEditor } from '@embededitor/free/standalone';

@Component({
  selector: 'app-photo-editor',
  standalone: true,
  template: '<div #host style="height: 600px"></div>'
})
export class PhotoEditorComponent implements AfterViewInit, OnDestroy {
  @Input({ required: true }) src!: string;

  @ViewChild('host') host!: ElementRef<HTMLElement>;

  private editor: ReturnType<typeof mountEditor> | null = null;

  ngAfterViewInit() {
    this.editor = mountEditor(this.host.nativeElement, {
      onProcess: ({ dest }) => {
        console.info('saved', dest.name);
      },
      src: this.src
    });
  }

  ngOnDestroy() {
    this.editor?.destroy();
    this.editor = null;
  }
}

Live

The Editor You Just Installed

The editor open on an island town from the air, a walking tour's four numbered stops listed beside it

The Full edition with the embededitor.com badge, running in your browser. Photo by Hugh Whyte on Unsplash.

In Angular

What Changes in Angular

The View Comes First

@ViewChild gives the host element only once the view exists, so mountEditor runs in ngAfterViewInit, on host.nativeElement. Give the host a height: the editor fills it.

Inputs Reach the Editor Through ngOnChanges

ngOnChanges calls editor.update(options). It runs before the view is ready too, and that first call does nothing.

Typed, and Cleared on Destroy

The editor is a ReturnType<typeof mountEditor> | null field. ngOnDestroy calls destroy() and sets it back to null, which keeps a late update from throwing.

The Inputs

The example declares src as @Input({ required: true }) and lang as an @Input that defaults to en-us.

Props

The Props You Will Use Most

src

The photo, read at open. The component's required input.

onProcess

Runs when Save finishes, with the file and its state.

aspectRatio

Opens the crop at a width / height ratio; null leaves it free.

onClose

Wire it to a method of the component. The Close button shows only when you pass it.

Every prop in the docs.

FAQ

Angular Questions

Does it work with standalone components?

Yes. The example is one: a standalone component with a @ViewChild host that mountEditor draws the editor into.

Why does the first ngOnChanges do nothing?

Before the view is ready there is no editor yet, so the first call does nothing. ngAfterViewInit mounts the editor with the same options.

Where do the options come from?

A private options() method builds { lang, src } from the inputs. ngAfterViewInit passes it to mountEditor and ngOnChanges passes it to update, so both send the same shape.

Set it up for Angular in the playground.

Change the edition, the colors, the tools and the crop, and copy the code for your app.

Open in the Playground

Another framework: React, Next.js, Vue, Svelte, JavaScript.