npm package: @send-with-ses/ng-email-designer
Description: Design responsive HTML emails that work in every email client. Fast and light weight.
Author: SENDUNE
Latest version: 0.5.22

# Angular Email Designer

This library was generated with [Angular CLI](https://github.com/angular/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](https://github.com/SendWithSES/Drag-and-Drop-Email-Designer))



## Initialization

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

**app.module.ts**

```ts

import { EmailEditorModule } from '@send-with-ses/ng-email-designer';
...

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

**app.component.ts**

```ts
import { Component, ViewChild } from '@angular/core';
import { EmailEditorComponent } from '@send-with-ses/ng-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**

```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.

**HTML Editor**

to use html editor, please include the following glob in 'assets' of your angular.json

{ "glob": "**/*", "input": "node_modules/monaco-editor/min", "output": "/assets/monaco/min" }

```
{
  "apps": [
    {
      "assets": [
        { "glob": "**/*", "input": "node_modules/monaco-editor/min", "output": "/assets/monaco/min" }
      ],
      ...
    }
    ...
  ],
  ...
}
```

And include MonacoEditorModule in Main Module and Feature Modules where you want to use the editor component.(eg: app.module.ts):

```
import { MonacoEditorModule } from 'ngx-monaco-editor-v2';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    MonacoEditorModule.forRoot() // use forRoot() in main app module only.
  ],
  providers: [],
})

```

**Image Handling**

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

```html
<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):

```css
@import '../node_modules/@send-with-ses/ng-email-designer/src/lib/theme.scss';
@import '../node_modules/@send-with-ses/ng-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.

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

**Known Issues**

1. If you encounter 'Cannot find name ActiveXObject' error,

    please include 'scripthost' in lib of tsconfig.json

    ```
    "lib": [
          "es2018",
          "dom",
          "ScriptHost"
        ],
    ```

## Further help

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