Angular Component

Unlayer editor is also available as a Angular component.

Installation

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

Npm

npm install angular-email-editor --save

Yarn

yarn add angular-email-editor

Usage

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

app.module.ts

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

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

app.component.ts

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() {
    // load the design json here
    // this.emailEditor.editor.loadDesign({});
  }

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

app.component.html

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

Methods

Method	Params	Description
loadDesign	Object data	Takes the design JSON and loads it in the editor
saveDesign	Function callback	Returns the design JSON in a callback function
exportHtml	Function callback	Returns the design HTML and JSON in a callback function

See the example source for a reference implementation.

Properties

Name	Type	Description	Default Value
minHeight	String	Minimum height to initialize the editor with	500px
options	Object	Options passed to the Unlayer editor instance	{}
tools	Object	Configuration for the built-in and custom tools	{}
appearance	Object	Configuration for appearance and theme	{}
loaded	Function	Called when the editor has finished loading
projectId	Integer	Unlayer project ID (optional)

Example

See the example source for a reference implementation.