Skip to main content
Version: Latest

Angular Quickstart

Get a drag-and-drop email editor running in Angular in under 2 minutes using the official dragble-angular-editor package.

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

Step 1: Install the package​

npm install dragble-angular-editor
yarn add dragble-angular-editor
pnpm add dragble-angular-editor

The Dragble SDK is loaded automatically from the CDN — no script tag required. Works with Angular 14+ (NgModule or standalone components).

Step 2: Add the editor component​

Standalone component (Angular 17+)​

src/app/email-editor/email-editor.component.ts
import { Component, ViewChild } from "@angular/core";
import {
  DragbleEditorComponent,
  type DesignJson,
  type DragbleSDK,
} from "dragble-angular-editor";

@Component({
  selector: "app-email-editor",
  standalone: true,
  imports: [DragbleEditorComponent],
  template: `
    <div style="padding: 8px">
      <button type="button" (click)="handleExportHtml()">Export HTML</button>
    </div>
    <dragble-editor
      #editor
      [editorKey]="'YOUR_EDITOR_KEY'"
      [editorMode]="'email'"
      [height]="600"
      (ready)="onReady($event)"
      (change)="onChange($event)"
      (error)="onError($event)"
    ></dragble-editor>
  `,
})
export class EmailEditorComponent {
  @ViewChild("editor") editor!: DragbleEditorComponent;

  onReady(editor: DragbleSDK): void {
    console.log("Editor is ready", editor);
  }

  onChange(data: { design: DesignJson; type: string }): void {
    console.log("Design changed:", data.design);
  }

  onError(error: Error): void {
    console.error("Editor error:", error);
  }

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

NgModule (Angular 14–16)​

If your project still uses NgModules, register DragbleEditorModule in your module's imports:

src/app/app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { DragbleEditorModule } from "dragble-angular-editor";
import { AppComponent } from "./app.component";
import { EmailEditorComponent } from "./email-editor/email-editor.component";

@NgModule({
  declarations: [AppComponent, EmailEditorComponent],
  imports: [BrowserModule, DragbleEditorModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

:::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​

The SDK methods are exposed directly on the component reference. All exports are Promise-based:

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

Save and load designs​

To persist work and reload it later, use exportJson / loadDesign:

// Save
const design = await this.editor.exportJson();
this.http.post("/api/designs", design).subscribe();

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

Next steps​