Skip to main content

Angular Setup

This guide covers setting up Unlayer in an Angular application using the official angular-email-editor package.

Installation​

npm install angular-email-editor
# or
yarn add angular-email-editor

Module Setup​

Import the module in your Angular module:

app.module.ts
import { EmailEditorModule } from 'angular-email-editor';

@NgModule({
  imports: [
    // ... other imports
    EmailEditorModule,
  ],
})
export class AppModule {}

Basic Usage​

app.component.ts
import { Component, ViewChild } from '@angular/core';
import { EmailEditorComponent } from 'angular-email-editor';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <button (click)="exportHtml()">Export HTML</button>
      <button (click)="saveDesign()">Save Design</button>
    </div>
    <email-editor
      #emailEditor
      [options]="options"
      (ready)="onReady()"
    ></email-editor>
  `,
})
export class AppComponent {
  @ViewChild('emailEditor') emailEditor: EmailEditorComponent;

  options = {
    displayMode: 'email',
  };

  onReady() {
    console.log('Editor is ready');
  }

  exportHtml() {
    this.emailEditor.editor.exportHtml((data: any) => {
      const { design, html } = data;
      console.log('HTML output:', html);
    });
  }

  saveDesign() {
    this.emailEditor.editor.saveDesign((design: any) => {
      console.log('Design JSON:', design);
    });
  }
}

Loading a Saved Design​

onReady() {
  const savedDesign = /* fetch from your backend */;
  this.emailEditor.editor.loadDesign(savedDesign);
}

What's Next​