@dearj/angular - Angular Component for DearJ Drag & Drop Email Editor

🌟 Overview

The official Angular wrapper for DearJ's powerful drag-and-drop email editor. Easily integrate professional email editing capabilities into your Angular applications.

🚀 Features

• Seamless Angular Integration: Native Angular component with proper lifecycle handling
• Type Safety: Built with TypeScript and compatible with @dearj/types
• Template Management: Load, edit, and export email templates
• Event Handling: Built-in event system for editor interactions
• Lightweight: Minimal dependencies, optimized for Angular

📦 Installation

npm install @dearj/angular

or

yarn add @dearj/angular

🚀 Basic Usage

1. Import Module

import { EmailEditorModule } from "@dearj/angular";

@NgModule({
  imports: [
    // ... other modules
    EmailEditorModule,
  ],
})
export class AppModule {}

2. Component Template

<email-editor
  #emailEditor
  [options]="editorOptions"
  [design]="templateDesign"
  (loaded)="onEditorLoaded()"
></email-editor>

<button (click)="exportHtml()">Export HTML</button>
<button (click)="exportJson()">Export JSON</button>

3. Component Class

import { Component, ViewChild } from "@angular/core";
import { EmailEditor, EditorConfig, Template } from "@dearj/angular";

@Component({
  selector: "app-email-editor",
  templateUrl: "./email-editor.component.html",
})
export class EmailEditorComponent {
  @ViewChild("emailEditor") emailEditor!: EmailEditor;

  editorOptions: EditorConfig = {
    authorization: "your-auth-token-here", // Required
    version: "latest", // Optional
  };

  templateDesign: Template | null = null; // Initial template (optional)

  onEditorLoaded() {
    console.log("Editor ready!");
  }

  async exportHtml() {
    try {
      const html = await this.emailEditor.exportHtml();
      console.log("Exported HTML:", html);
      // Handle HTML export
    } catch (error) {
      console.error("Export failed:", error);
    }
  }

  async exportJson() {
    try {
      const json = await this.emailEditor.exportJson();
      console.log("Exported JSON:", json);
      // Handle JSON export
    } catch (error) {
      console.error("Export failed:", error);
    }
  }
}

⚙️ Component API

Inputs

| Input | Type | Required | Description | | --------- | ------------------ | -------- | -------------------------------------------- | | options | EditorConfig | Yes | Editor configuration including authorization | | design | Template \| null | No | Initial template to load |

Outputs

| Event | Type | Description | | --------- | -------------------- | ---------------------------------------------- | | loaded | EventEmitter<void> | Emitted when editor finishes loading design | | updated | EventEmitter<void> | Emitted when editor finishes design is updated |

Methods

| Method | Returns | Description | | -------------- | ------------------- | --------------------------------------- | | exportHtml() | Promise<string> | Exports current design as HTML string | | exportJson() | Promise<Template> | Exports current design as JSON template |

🔒 Security Configuration

The authorization token is required for editor functionality. Handle tokens securely:

// Recommended approach - fetch from secure storage
editorOptions: EditorConfig = {
  authorization: "YOUR_AUTHORIZATION_TOKEN" || "",
  version: "latest",
};

📝 License

DearJ is available under the BSD-3-CLAUSE License.