Creating a Drag-n-Drop Email Editor with Angular

Building a good, reliable drag-n-drop email editor is hard. Every time we wanted to add one in any of our projects, there weren’t many good options available that were polished and reliable enough for commercial use.

After months of search, we decided to build one that can be embedded in any web app within 5 minutes. It’s available on 

It takes care of all the unsexy and boring stuff that comes with building a reliable and solid email editor / page builder. Things like outputting the correct HTML syntax, and making sure it looks and works fine in all old browsers and email clients (Hey, IE & Outlook =).

The easiest way to use Angular Email Editor is to install it from npm or Yarn and include it in your own Angular build process.

Next, you'll need to import the Email Editor module in the app module.

import { EmailEditorModule } from 'angular-email-editor';
...

@NgModule({
  ...
  imports: [ EmailEditorModule ],
  ...
});

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-email-editor';

  @ViewChild(EmailEditorComponent)
  private emailEditor: EmailEditorComponent;
}

That’s it. This should render a fully functional drag-n-drop editor in your Angular app.

Now that we have a fully functional email editor, we need to save the HTML it outputs. The editor exposes a method called 

We'll add a button that calls exportHtml.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-email-editor';

  @ViewChild(EmailEditorComponent)
  private emailEditor: EmailEditorComponent;

  exportHtml() {
    this.emailEditor.exportHtml((data) => console.log('exportHtml', data));
  }
}

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

While HTML is the final result of the design, you will need to save the work done in the email editor for future use. There are a number of use cases for this such as:

Our email editor saves all work in JSON format. You can save the JSON and then pass it when loading the editor again and it will resume from where you left.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-email-editor';

  @ViewChild(EmailEditorComponent)
  private emailEditor: EmailEditorComponent;

  saveDesign() {
    this.emailEditor.saveDesign((design) => console.log('saveDesign', design));
  }
}

<div class="container">
  <button (click)="saveDesign()">Save Design</button>
  <email-editor></email-editor>
</div>

Once you have the JSON saved, you can pass it to the editor using the 

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-email-editor';

  @ViewChild(EmailEditorComponent)
  private emailEditor: EmailEditorComponent;

  editorLoaded() {
    const json = /* DESIGN JSON GOES HERE */
    this.emailEditor.loadDesign(json);
  }
}

https://angular-email-editor-demo.netlify.com/

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Tutorials on Page Builder

Creating a Drag-n-Drop Email Editor with Angular

Email Newsletter

Popular Topics

Masterclasses

Tutorials

Fullstack React with TypeScript