Socket
Book a DemoInstallSign in
Socket

ip-email-builder

Package Overview
Dependencies
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ip-email-builder

An Angular Email Template Builder Module integrated with MJML out of the box.

9.5.4
latest
npmnpm
Version published
Weekly downloads
37
-27.45%
Maintainers
1
Weekly downloads
 
Created
Source

Release semantic-release

npm latest version npm next version npm beta version

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.

Keywords

email builder

FAQs

Package last updated on 07 Mar 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.