Mail-template-builder NPM

Mail Builder Library

Mail Builder is an Angular library designed to help you create, manage, and customize email templates with ease. It provides a user-friendly interface and leverages Angular Material for a consistent and modern design.

Installation
Prerequisites
Getting Started
Usage
Configuration
License

Installation

To install the Mail Builder library, run:

npm install mail-template-builder

Prerequisites

1. Angular Material

This library requires Angular Material to be installed in your project. If you haven’t set up Angular Material, you can install it by following these steps:

ng add @angular/material

2. Browser Animations Module

To enable animations (used by Angular Material), ensure that the BrowserAnimationsModule is configured in your application. This can be done by adding provideAnimationsAsync() to your app.config.ts file.

Example:

import { provideAnimationsAsync } from "@angular/platform-browser/animations";
import { ApplicationConfig } from "@angular/core";

export const appConfig: ApplicationConfig = {
  providers: [provideAnimationsAsync()],
};

3. Font Awesome Icons

The icons used in this library are displayed using a licensed version of Font Awesome. Development is ongoing to ensure all icons are displayed correctly, regardless of the host application's Font Awesome configuration.

If the free version of Font Awesome is configured in the host app, some icons will be available.
If the Pro version of Font Awesome is configured, all icons used in the library will be displayed as intended.

Getting Started

Once installed, import the MailBuilderModule into your application module or any feature module where you intend to use it.

Import Example:

import { MailBuilderModule } from 'mail-template-builder';

@Component({
  selector: 'app-mail-builder',
  standalone: true,
  imports: [MailBuilderModule],
  templateUrl: './mail-builder.component.html',
  styleUrl: './mail-builder.component.scss'
})
export class MailBuilderComponent

Usage

To use the Mail Builder, simply include its component in your templates.

Example:

<mail-builder color="lightblue" canvasBgColor="white" canvasHeight="calc(100vh - 100px)" propertiesBgColor="white" propertiesHeight="calc(100vh - 100px)" materialColor="primary" [copyHtml]="true" (convertToHtml)="sendEmail($event)"></mail-builder>

import { MailBuilderModule } from 'mail-template-builder';

@Component({
  selector: 'app-mail-builder',
  standalone: true,
  imports: [MailBuilderModule],
  templateUrl: './mail-builder.component.html',
  styleUrl: './mail-builder.component.scss'
})
export class MailBuilderComponent
    sendEmail(html: string) {
        // Place your code here to handle the generated html
}

Configuration

The library provides a set of configurable options for customization:

Inputs

Property	Type	Default Value	Description
Appearance
`color`	`string`	`'#1236b8'`	Sets the primary color used in the Mail Builder.
`materialColor`	`'primary' \\| 'accent'`	`'primary'`	Sets the Angular Material theme color for components.
`canvasBgColor`	`string`	`'white'`	Sets the background color of the canvas area.
`propertiesBgColor`	`string`	`'white'`	Sets the background color of the properties panel.
Behavior
`copyHtml`	`boolean`	`false`	Enables copying the generated HTML to the clipboard.
`saveToStorage`	`boolean`	`false`	Enables saving email templates to local storage.
Layout
`canvasHeight`	`string`	`'calc(100vh - 80px)'`	Sets the height of the canvas area.
`propertiesHeight`	`string`	`'calc(100vh - 80px)'`	Sets the height of the properties panel.
Labels
`convertLabel`	`string`	`"Create e-mail"`	Sets the label for the button that triggers the conversion to HTML.