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!

$3

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:

``bash
npm i ip-email-builder
`

Install dependencies:

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

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

Add Material Icons to index.html

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

Import IpEmailBuilderModule to your main module

`js
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:

`html

`

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:

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

`html




``

More Documentation

Get more info from online documentation.