ip-email-builder

Angular Email Template Builder Module

An Angular 9+ Email Template Builder Module integrated with MJML out of the box. Here're some features: Custom Google Fonts, Lazy Loading Support, Fully Responsive thanks to MJML, Predefined Modules and Templates and many others like Column resizing and Preview!

Documentation for v9.0.0-alpha is not ready yet, join my Slack Channel to have more info.

Before installing

You must know that this module requires an API Key to generate the HTML Templates, you can use either one for free or demand a paid to get rid of free API Key limitations. Keep in mind that the current free API Key (showed below) is used for all users who test this module, and you can easily run outside of API Key's limitations. So, in case you have an error on saving, this might be the problem.

Current limitations are applied to this free API Key: 2 req/second and a maximum of 200 req/day. For more pieces of information about other API Keys and Licenses, check out this website wlocalhost.org.

Using this module, you automatically use a Regular License.

Getting Start

Install builder:

npm i ip-email-builder

Install dependencies:

npm i @angular/flex-layout @angular/material @angular/cdk @angular/localize quill ngx-quill ngx-color recursive-diff angular-resizable-element

Add Material design theme styles

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

Add Material Icons to index.html

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

Import IpEmailBuilderModule to your main module

import { IpEmailBuilderModule } from 'ip-email-builder';

@NgModule({
  declarations: [AppComponent],
  imports: [
    // Begins from v8.1.5 xApiKey is not mandatory
    IpEmailBuilderModule.forRoot(),
  ],
  bootstrap: [AppComponent]
})

Insert ip-email-builder component where you want to show, it accept an IPEmail as [email] input:

<ip-email-builder [email]="email"></ip-email-builder>

It's not mandatory to set the [email] input, you can use the old way, via _ngb.Email = new IPEmail({ ... }).

Example

See it in action on our demo website.

Let's say that this is app.component.ts:

import { Component, OnInit } from '@angular/core';
import { ReplaySubject, BehaviorSubject } from 'rxjs';
import {
  IpEmailBuilderService,
  Structure,
  TextBlock,
  IPEmail,
} from 'ip-email-builder';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  email = new BehaviorSubject(
    new IPEmail({
      structures: [
        new Structure('cols_1', [[new TextBlock("I'm a new email")]]),
      ],
    })
  );

  changeEmail() {
    this.email.next(
      new IPEmail({
        structures: [
          new Structure('cols_1', [
            [new TextBlock("I'm a new block created via subscribtion")],
          ]),
        ],
      })
    );
  }
}

and this is app.component.html

<ip-email-builder [email]="email | async" style="...">
  <!-- Include custom html near top buttons -->
  <div class="top-actions"></div>
  <!-- Include custom html after content blocks -->
  <div class="after-content-blocks"></div>
  <!-- Include custom html after structure blocks -->
  <div class="after-structure-blocks"></div>
</ip-email-builder>

More Documentation

Get more info from online documentation.