@dearj/angular

@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 open-source and available under the MIT License.