Web: Angular Preview

@nitrakit/angular gives you two standalone directives that show an editor in your elements. It builds on @nitrakit/web: read the JavaScript page for requirements, the license key, media and export. Everything from @nitrakit/web is re-exported.

Beta access

During the beta, the SDK is shared with teams that have an invite, together with install instructions. Ask for access if you don't have it yet.

Show the editor

Create the editor in your component and destroy it when the component goes away; the nitrakitPreview and nitrakitEditor directives show it.

import { Component, OnDestroy, OnInit, signal } from '@angular/core'
import { createEditor, NitrakitEditor, NitrakitPreview, type Editor } from '@nitrakit/angular'

@Component({
  selector: 'app-video-editor',
  standalone: true,
  imports: [NitrakitPreview, NitrakitEditor],
  template: `
    <div [nitrakitPreview]="editor()" style="height: 60vh"></div>
    <div [nitrakitEditor]="editor()" style="height: 320px"></div>
  `,
})
export class VideoEditorComponent implements OnInit, OnDestroy {
  editor = signal<Editor | null>(null)

  async ngOnInit() {
    this.editor.set(
      await createEditor({
        width: 1080,
        height: 1920,
        onRequest: async (request) => {
          if (request.kind === 'addMedia') {
            const file = await this.openMyMediaLibrary()
            return file ? { source: (await this.editor()!.addMedia(startUpload(file), file)).source } : null
          }
          return undefined // the built-in picker
        },
      }),
    )
  }

  ngOnDestroy() {
    this.editor()?.destroy()
  }
}

Call load() and setLicense() once at start-up, for example with provideAppInitializer. Angular 17 or later.