Angular Reference

The Dragble editor can be embedded in Angular using the CDN-based SDK.

Adding the SDK

Add the script tag to your index.html:

<script src="https://sdk.dragble.com/latest/dragble-sdk.min.js"></script>

Usage with Angular

Use Angular's lifecycle hooks to initialize and clean up the editor:

import {
  Component,
  ElementRef,
  ViewChild,
  AfterViewInit,
  OnDestroy,
} from "@angular/core";

@Component({
  selector: "app-email-editor",
  template: `
    <button (click)="handleExport()">Export HTML</button>
    <div
      #editorContainer
      id="editor-container"
      style="height: 600px; display: block"
    ></div>
  `,
})
export class EmailEditorComponent implements AfterViewInit, OnDestroy {
  @ViewChild("editorContainer") editorContainer!: ElementRef<HTMLDivElement>;
  private editor: DragbleEditorInstance | null = null;

  ngAfterViewInit(): void {
    if (!this.editorContainer) return;

    this.editor = dragble.createEditor({
      containerId: "editor-container",
      user: { id: "user-1", name: "Jane", email: "jane@example.com" },
      appearance: { theme: "light" },
    });

    this.editor.addEventListener("ready", () => {
      console.log("Editor ready");
    });

    this.editor.addEventListener("change", (design: any) => {
      console.log("Changed", design);
    });
  }

  ngOnDestroy(): void {
    this.editor?.destroy();
  }

  async handleExport(): Promise<void> {
    if (!this.editor) return;
    const html = await this.editor.exportHtml();
    console.log("Exported HTML:", html);
  }
}

Editor Instance Methods

Method	Signature	Description
loadDesign	(design: DesignJson) => void	Load a design.
getDesign	() => DesignJson	Get the current design JSON.
exportHtml	() => Promise<ExportHtmlData>	Export as HTML.
exportImage	(options?: ExportImageOptions) => Promise<ExportImageData>	Export as image.
exportPdf	(options?: ExportPdfOptions) => Promise<ExportPdfData>	Export as PDF.
undo	() => void	Undo last action.
redo	() => void	Redo last action.
setViewMode	(mode: ViewMode) => void	Switch desktop/tablet/mobile.
setTheme	(theme: ThemeMode) => void	Switch light/dark theme.
showPreview	() => void	Open preview modal.
hidePreview	() => void	Close preview modal.
destroy	() => void	Destroy the editor instance.
addEventListener	(event: string, handler: Function) => void	Subscribe to events.
removeEventListener	(event: string, handler: Function) => void	Unsubscribe from events.

TypeScript

Add type declarations in your type definition file:

declare const dragble: {
  createEditor(config: DragbleConfig): DragbleEditorInstance;
};

warning

The editor container must have an explicit height. Add display: block and a height via styles, otherwise it collapses to zero.