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

MethodParamsDescription
loadDesign Object dataTakes the design JSON and loads it in the editor
saveDesign Function callbackReturns the design JSON in a callback function
exportHtml Function callbackReturns the design HTML and JSON in a callback function

See the example source for a reference implementation.

Properties

NameTypeDescriptionDefault Value
minHeightStringMinimum height to initialize the editor with500px
optionsObjectOptions passed to the Unlayer editor instance{}
toolsObjectConfiguration for the built-in and custom tools{}
appearanceObjectConfiguration for appearance and theme{}
loadedFunctionCalled when the editor has finished loading
projectIdIntegerUnlayer project ID (optional)

Example

See the example source for a reference implementation.


Did this page help you?