ip-email-builder
v9.5.4
Published
An Angular Email Template Builder Module integrated with MJML out of the box.
Downloads
709
Maintainers
Readme
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.