Skip to main content
Version: Latest

Angular Quickstart

Get a drag-and-drop email editor running in Angular in under 2 minutes.

:::info Prerequisites You need an editorKey from the Dragble Dashboard. This authenticates your editor instance. :::

Step 1: Add the script tag​

Add the Dragble SDK script to your index.html:

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

Step 2: Add the editor component​

src/app/email-editor/email-editor.component.ts
import {
  Component,
  ElementRef,
  ViewChild,
  AfterViewInit,
  OnDestroy,
} from "@angular/core";

@Component({
  selector: "app-email-editor",
  template: `
    <div style="padding: 8px">
      <button (click)="handleExportHtml()">Export HTML</button>
    </div>
    <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 {
    this.editor = dragble.createEditor({
      containerId: "editor-container",
      editorKey: "YOUR_EDITOR_KEY",
      editorMode: "email",
    });

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

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

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

:::warning Replace placeholder Replace YOUR_EDITOR_KEY with the editor key from your Dragble Dashboard. :::

You should see a drag-and-drop email editor with a toolbar on the right, content blocks on the left, and a canvas in the center.

Step 3: Export HTML​

async handleExportHtml(): Promise<void> {
  if (!this.editor) return;
  const html = await this.editor.exportHtml();
  if (html) {
    // Send to your backend, preview, or download
    console.log(html);
  }
}

Save and load designs​

// Save the current design
const design = this.editor.getDesign();
this.http.post("/api/designs", design).subscribe();

// Load a previously saved design
this.editor.loadDesign(design);

Next steps​