Angular Email Designer

This library was generated with Angular CLI version 15.2.0.

Installation

Install via NPM:

npm install @send-with-ses/ng-email-designer

Or via YARN:

yarn add @send-with-ses/ng-email-designer

Live Demo

Check out the live demo here: https://designer.sendune.com (Source Code)

Initialization

Import the Email Editor module in your app's module.

app.module.ts

import { EmailEditorModule } from "email-designer";
...

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

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { EmailEditorComponent } from "email-designer";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  @ViewChild(EmailEditorComponent)
  private emailEditor: EmailEditorComponent;

  selectedTemplate: TemplateBean;
  selectedTemplateType = '';

  // To get the HTML output of the template
  exportHtml() {
    console.log(this.emailEditor.exportHtml());
    this.emailEditor.showHtmlPreview();
  }

  preview() {
    this.emailEditor.showPreview();
  }
}

app.component.html

<div class="container">
  <button (click)="exportHtml()">Export</button>
  <lib-email-designer [type]="selectedTemplateType" [template]="selectedTemplate" #emailEditor></lib-email-designer>
</div>

Documentation

We support 3 types of Templates

1. SENDUNE Designer (ses_designer)
2. HTML Editor (html_editor)
3. Plain Text (plain_text)

Pass the relevant template type as 'selectedTemplateType' to use it.

Image Handling

Images can be directly uploaded to a cloud storage of your choice (ex: AWS S3, Cloudflare R2, GCP Cloud Storage etc).

<lib-email-designer [type]="selectedTemplateType" [template]="selectedTemplate" #emailEditor class="px-0"
        (imageSelectionTriggered)="onImageSelectionTrigger($event)"
        (imageUploadTriggered)="onImageUploadTrigger($event)"
        (emailContentChanged)="onEmailContentChange($event)"
        ></lib-email-designer>

Please implement your image upload functionality and provide it to the library as above (imageUploadTriggered/imageSelectionTriggered).

🎨 UI Theming and Styles

You can make a few changes to make the Email Designer match your website colors.

Import the following styles into your global styles file (e.g., styles.scss):

@import '../node_modules/email-designer/src/lib/theme.scss';
@import '../node_modules/email-designer/src/lib/email-editor.css';

To make the Email Designer match your website's UI, include the following in your main.scss or styles.scss file and change the colors as you like.

 :root {
    --sws-icon-color: #ccc;
    --sws-icon-hover-color: #555;
    --sws-header-background: #eee;
    --sws-header-text-color: #555;
    --sws-border-color: #ccc;
 }

Further help

Write to designer [at] sendune [dot] com if you need any help.