Angular Component

unlayer/angular-email-editor is open source

Star, browse the source, file issues, or contribute.

Star on GitHub

Installation

npm install angular-email-editor

Module setup

Add EmailEditorModule to your application's imports:

app.module.ts

import { NgModule } from '@angular/core';
import { EmailEditorModule } from 'angular-email-editor';

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

Basic usage

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { EmailEditorComponent } from 'angular-email-editor';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <button (click)="exportHtml()">Export HTML</button>
      <button (click)="saveDesign()">Save Design</button>
    </div>
    <email-editor
      #emailEditor
      [options]="options"
      (ready)="onReady()"
    ></email-editor>
  `,
})
export class AppComponent {
  @ViewChild('emailEditor') emailEditor!: EmailEditorComponent;

  options = {
    projectId: 1234, // replace with your Unlayer Project ID
    displayMode: 'email',
    features: {
      ai: true,
    },
  };

  onReady() {
    // Editor is ready. Optionally load a saved design here:
    // this.emailEditor.editor.loadDesign(savedDesign);
  }

  exportHtml() {
    this.emailEditor.editor.exportHtml((data: any) => {
      const { design, html } = data;
      console.log('HTML output:', html);
    });
  }

  saveDesign() {
    this.emailEditor.editor.saveDesign((design: any) => {
      console.log('Design JSON:', design);
    });
  }
}

If you prefer separate template/HTML files, the same component split looks like:

app.component.html

<div class="container">
  <button (click)="exportHtml()">Export</button>
  <email-editor #emailEditor (ready)="onReady()"></email-editor>
</div>

Loading a saved design

onReady() {
  const savedDesign = /* fetch from your backend */;
  this.emailEditor.editor.loadDesign(savedDesign);
}

Methods

Available on this.emailEditor.editor:

Method	Params	Description
loadDesign	Object data	Loads a saved design JSON into the editor
saveDesign	Function callback	Returns the current design JSON via callback
exportHtml	Function callback	Returns the rendered HTML and design JSON via callback

Props

Name	Type	Description	Default
minHeight	String	Minimum height to initialize the editor with	500px
options	Object	Options passed to the Unlayer editor instance. See the configuration options for everything available.	{}
tools	Object	Configuration for built-in and custom tools	{}
appearance	Object	Configuration for appearance and theme	{}
projectId	Integer	Unlayer Project ID (alternative to passing via options)
ready	Output	Emits when the editor has finished loading
loaded	Output	Emits when the editor instance is created

Example

A full working reference implementation lives in the angular-email-editor demo.