> ## Documentation Index
> Fetch the complete documentation index at: https://docs.embededitor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Angular

> Mount Embed Editor from an Angular standalone component with the standalone entry.

Mount the editor from an Angular standalone component with the standalone entry.

> [!TIP]
>
> Try every prop live in the [playground](https://embededitor.com/playground#c=eyJlZGl0aW9uIjoiRlVMTCIsImZyYW1ld29yayI6IkFOR1VMQVIifQ), open on Angular, and copy the code it writes.

> [tab] Free
>
> Free is on public npm, with no key. It has the Adjust tools, and a small "embededitor.com" badge in the corner of the menu.
>
> ## Install
>
> ```bash npm theme={"dark"}
> npm install @embededitor/free
> ```
>
> ```bash yarn theme={"dark"}
> yarn add @embededitor/free
> ```
>
> ```bash pnpm theme={"dark"}
> pnpm add @embededitor/free
> ```
>
> ```bash bun theme={"dark"}
> bun add @embededitor/free
> ```
>
> ## Render
>
> Call `mountEditor` in `ngAfterViewInit` on the element of an `ElementRef`.
>
> ```ts photo-editor.component.ts theme={"dark"}
> import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, ViewChild } from '@angular/core';
> import { mountEditor } from '@embededitor/free/standalone';
> import type { Lang } from '@embededitor/free/standalone';
>
> @Component({
>   selector: 'app-photo-editor',
>   standalone: true,
>   template: '<div #host style="height: 600px"></div>'
> })
> export class PhotoEditorComponent implements AfterViewInit, OnChanges, OnDestroy {
>   @Input() lang: Lang = 'en-us';
>   @Input({ required: true }) src!: string;
>
>   @ViewChild('host') host!: ElementRef<HTMLElement>;
>
>   private editor: ReturnType<typeof mountEditor> | null = null;
>
>   ngAfterViewInit() {
>     this.editor = mountEditor(this.host.nativeElement, this.options());
>   }
>
>   ngOnChanges() {
>     this.editor?.update(this.options());
>   }
>
>   ngOnDestroy() {
>     this.editor?.destroy();
>     this.editor = null;
>   }
>
>   private options() {
>     return { lang: this.lang, src: this.src };
>   }
> }
> ```
>
> Give the host element a height: the editor fills it.
>
> ## Update Props
>
> `ngOnChanges` sends the full options again through `update(options)`, not a patch. Before the view is ready there is no editor yet, so the first call does nothing.
>
> `src` and `state` are read when the editor opens. Once an image is on screen, destroy the editor and mount it again to open another one.
>
> ## Clean Up
>
> Call `destroy()` in `ngOnDestroy`, as above. Calling `update` after `destroy` throws.

> [tab] Lite
>
> Lite has the Adjust tools, without the badge. It installs from the private registry, with the key of your license.
>
> ## Set Up the Registry
>
> Your license key is on its card in your account at `account.embededitor.com`. [Buy a plan](https://embededitor.com/pricing) to get one.
>
> Point the `@embededitor` scope at the registry, and keep the key in an environment variable named `EMBED_EDITOR_KEY`, out of git.
>
> For npm, pnpm, bun and Yarn 1, add this to the `.npmrc` of your project:
>
> ```ini .npmrc theme={"dark"}
> @embededitor:registry=https://get.embededitor.com/
> //get.embededitor.com/:_authToken=${EMBED_EDITOR_KEY}
> ```
>
> Yarn 2 and newer ignore `.npmrc`. Add this to `.yarnrc.yml` instead:
>
> ```yaml .yarnrc.yml theme={"dark"}
> npmScopes:
>   embededitor:
>     npmRegistryServer: "https://get.embededitor.com"
>     npmAuthToken: "${EMBED_EDITOR_KEY}"
> ```
>
> Set the key where your install runs, your shell or your CI's secrets, never in git:
>
> ```bash Terminal theme={"dark"}
> export EMBED_EDITOR_KEY=<your-key>
> ```
>
> ## Install
>
> ```bash npm theme={"dark"}
> npm install @embededitor/lite
> ```
>
> ```bash yarn theme={"dark"}
> yarn add @embededitor/lite
> ```
>
> ```bash pnpm theme={"dark"}
> pnpm add @embededitor/lite
> ```
>
> ```bash bun theme={"dark"}
> bun add @embededitor/lite
> ```
>
> ## Render
>
> Call `mountEditor` in `ngAfterViewInit` on the element of an `ElementRef`.
>
> ```ts photo-editor.component.ts theme={"dark"}
> import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, ViewChild } from '@angular/core';
> import { mountEditor } from '@embededitor/lite/standalone';
> import type { Lang } from '@embededitor/lite/standalone';
>
> @Component({
>   selector: 'app-photo-editor',
>   standalone: true,
>   template: '<div #host style="height: 600px"></div>'
> })
> export class PhotoEditorComponent implements AfterViewInit, OnChanges, OnDestroy {
>   @Input() lang: Lang = 'en-us';
>   @Input({ required: true }) src!: string;
>
>   @ViewChild('host') host!: ElementRef<HTMLElement>;
>
>   private editor: ReturnType<typeof mountEditor> | null = null;
>
>   ngAfterViewInit() {
>     this.editor = mountEditor(this.host.nativeElement, this.options());
>   }
>
>   ngOnChanges() {
>     this.editor?.update(this.options());
>   }
>
>   ngOnDestroy() {
>     this.editor?.destroy();
>     this.editor = null;
>   }
>
>   private options() {
>     return { lang: this.lang, src: this.src };
>   }
> }
> ```
>
> Give the host element a height: the editor fills it.
>
> ## Update Props
>
> `ngOnChanges` sends the full options again through `update(options)`, not a patch. Before the view is ready there is no editor yet, so the first call does nothing.
>
> `src` and `state` are read when the editor opens. Once an image is on screen, destroy the editor and mount it again to open another one.
>
> ## Clean Up
>
> Call `destroy()` in `ngOnDestroy`, as above. Calling `update` after `destroy` throws.

> [tab] Full
>
> Full has every tool, without the badge. It installs from the private registry, with the key of your license.
>
> ## Set Up the Registry
>
> Your license key is on its card in your account at `account.embededitor.com`. [Buy a plan](https://embededitor.com/pricing) to get one.
>
> Point the `@embededitor` scope at the registry, and keep the key in an environment variable named `EMBED_EDITOR_KEY`, out of git.
>
> For npm, pnpm, bun and Yarn 1, add this to the `.npmrc` of your project:
>
> ```ini .npmrc theme={"dark"}
> @embededitor:registry=https://get.embededitor.com/
> //get.embededitor.com/:_authToken=${EMBED_EDITOR_KEY}
> ```
>
> Yarn 2 and newer ignore `.npmrc`. Add this to `.yarnrc.yml` instead:
>
> ```yaml .yarnrc.yml theme={"dark"}
> npmScopes:
>   embededitor:
>     npmRegistryServer: "https://get.embededitor.com"
>     npmAuthToken: "${EMBED_EDITOR_KEY}"
> ```
>
> Set the key where your install runs, your shell or your CI's secrets, never in git:
>
> ```bash Terminal theme={"dark"}
> export EMBED_EDITOR_KEY=<your-key>
> ```
>
> ## Install
>
> ```bash npm theme={"dark"}
> npm install @embededitor/full
> ```
>
> ```bash yarn theme={"dark"}
> yarn add @embededitor/full
> ```
>
> ```bash pnpm theme={"dark"}
> pnpm add @embededitor/full
> ```
>
> ```bash bun theme={"dark"}
> bun add @embededitor/full
> ```
>
> ## Render
>
> Call `mountEditor` in `ngAfterViewInit` on the element of an `ElementRef`.
>
> ```ts photo-editor.component.ts theme={"dark"}
> import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, ViewChild } from '@angular/core';
> import { mountEditor } from '@embededitor/full/standalone';
> import type { Lang } from '@embededitor/full/standalone';
>
> @Component({
>   selector: 'app-photo-editor',
>   standalone: true,
>   template: '<div #host style="height: 600px"></div>'
> })
> export class PhotoEditorComponent implements AfterViewInit, OnChanges, OnDestroy {
>   @Input() lang: Lang = 'en-us';
>   @Input({ required: true }) src!: string;
>
>   @ViewChild('host') host!: ElementRef<HTMLElement>;
>
>   private editor: ReturnType<typeof mountEditor> | null = null;
>
>   ngAfterViewInit() {
>     this.editor = mountEditor(this.host.nativeElement, this.options());
>   }
>
>   ngOnChanges() {
>     this.editor?.update(this.options());
>   }
>
>   ngOnDestroy() {
>     this.editor?.destroy();
>     this.editor = null;
>   }
>
>   private options() {
>     return { lang: this.lang, src: this.src };
>   }
> }
> ```
>
> Give the host element a height: the editor fills it.
>
> ## Update Props
>
> `ngOnChanges` sends the full options again through `update(options)`, not a patch. Before the view is ready there is no editor yet, so the first call does nothing.
>
> `src` and `state` are read when the editor opens. Once an image is on screen, destroy the editor and mount it again to open another one.
>
> ## Clean Up
>
> Call `destroy()` in `ngOnDestroy`, as above. Calling `update` after `destroy` throws.

## Next Steps

> [card] [Props](https://docs.embededitor.com/api-reference/props.md)
>
> Every option the editor takes.

> [card] [mountEditor](https://docs.embededitor.com/api-reference/mount-editor.md)
>
> The full signature.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.