The excellent drag-n-drop email editor by [Unlayer](https://unlayer.com/embed) as a [Angular](https://angular.io/) _wrapper component_. This is the most powerful and developer friendly visual email builder for your app.
npm install @trippete/angular-email-editor
npm install @trippete/angular-email-editor --save
`
Usage
Next, you'll need to import the Email Editor module in your app's module.
app.module.ts
`ts
import { EmailEditorModule } from 'angular-email-editor';
...
@NgModule({
...
imports: [ EmailEditorModule ],
...
});
`
app.component.ts
`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;
// 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)
);
}
}
`
app.component.html
`html
(ready)="editorReady($event)"
>
`
$3
| 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.
$3
- 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