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.


Did this page help you?