[![Release](https://github.com/wanoo21/Angular-email-builder/actions/workflows/publish_library.yml/badge.svg?branch=master)](https://github.com/wanoo21/Angular-email-builder/actions/workflows/publish_library.yml)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

[![npm latest version](https://raster.shields.io/npm/v/ip-email-builder/latest.svg)](https://www.npmjs.com/package/ip-email-builder)
[![npm next version](https://raster.shields.io/npm/v/ip-email-builder/next.svg)](https://www.npmjs.com/package/ip-email-builder)
[![npm beta version](https://raster.shields.io/npm/v/ip-email-builder/beta.svg)](https://www.npmjs.com/package/ip-email-builder)

# Angular Email Template Builder Module
An **Angular 9+** [Email Template Builder Module](https://wlocalhost.org?utm_source=npm) integrated with [MJML](https://mjml.io) 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](https://join.slack.com/t/ngb-module/shared_invite/zt-ctjr3xie-UedH7PRMl8IylnHnI4_Gww) 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](https://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
<link
  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
<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](https://wlocalhost.org?utm_source=npm).

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
<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](https://ngb.wlocalhost.org/docs/first-steps).