Drag-n-Drop Subscription Email Editor Component for Angular

angular-email-template-builder-free

Angular Email Editor is an excellent drag-and-drop email editor made by Unlayer as an Angular envelope component. This is the most powerful and developer-friendly visual email generator for your app.

angular email editor npm github, drag and drop email builder open source, drag and drop templates, drag and drop wysiwyg editor, angular email template builder, send email in angular stackblitz

How to make use of it:

Installation:

# NPM
$ npm install angular-email-editor --save

Next, you will need to import the email editor module into your application 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;

  // called when the editor is created
  editorLoaded() {
    console.log('editorLoaded');
    // load the design json here
    // this.emailEditor.editor.loadDesign({});
  }

  // called when the editor has finished loading
  editorReady() {
    console.log('editorReady');
  }

  exportHtml() {
    this.emailEditor.editor.exportHtml((data) =>
      console.log('exportHtml', data)
    );
  }
}
<div class="container">
  <button (click)="exportHtml()">Export</button>
  <email-editor
    (loaded)="editorLoaded($event)"
    (ready)="editorReady($event)"
  ></email-editor>
</div>

Methods

methodparamsdescription
loadDesignObject dataTakes the design JSON and loads it in the editor
saveDesignFunction callbackReturns the design JSON in a callback function
exportHtmlFunction callbackReturns the design HTML and JSON in a callback function

Properties

  • editorId String HTML div id of the container where the editor will be embedded (optional)
  • minHeight String minimum height to initialize the editor with (default 500px)
  • options Object options passed to the Unlayer editor instance (default {})
  • tools Object configuration for the built-in and custom tools (default {})
  • appearance Object configuration for appearance and theme (default {})
  • projectId Integer Unlayer project ID (optional)
  • loaded Function called when the editor instance is created
  • ready Function called when the editor has finished loading

Drag’n’drop Subscription Letter Editor, Angular Email Editor Plugin/Github, drag and drop email builder free


See Demo And Download

Official Website(unlayer): Click Here

This superior jQuery/javascript plugin is developed by unlayer. For extra Advanced usage, please go to the official website.

Share