4 Quick Steps to Embed Unlayer Email Builder in Angular

Are you thinking to embed Unlayer email builder in Angular? You are exactly where you need to be.

This guide covers each and every step you need to perform from installation to integration, configuration, and eventually getting the email builder up and running in your app. 

Let’s get started. 

Step 1: Install the Angular Component

Install Unlayer Angular wrapper via npm or yarn:

npm install angular-email-editor --save

Or 

yarn add angular-email-editor

Step 2: Add Unlayer Editor Code 

Add Unlayer Angular wrapper to the app.component.ts file inside the src/app folder.

import { Component } from '@angular/core';
import { isPlatformBrowser, CommonModule, NgIf } from '@angular/common';
import { EmailEditorModule } from 'angular-email-editor';
@Component({
 selector: 'app-root',
 standalone: true,
 imports: [EmailEditorModule],
 template: `
   <email-editor
     [options]="editorOptions"
     (onLoad)="editorLoaded()"
     (onReady)="editorReady($event)">
   </email-editor>
 `,
})
export class AppComponent {
 editorOptions = {
               // provide Unlayer parameters here
 };
 
editorLoaded() {
   console.log('Editor loaded');
 }


editorReady(unlayer: any) {
   console.log('Editor is ready', unlayer);
 }
}

Step 3: Configure Editor Options

Pass your projectId, displayMode, version, amp, and customJS into the options prop (we’ve named it editorOptions here), like this:

editorOptions = {
   projectId: 123456, // Replace with your actual Unlayer project ID
   displayMode: 'email' as 'email', // replace with "web", or "document", or "popup"
   version: 'latest',
 };

Step 4: Run Your Angular App & Test the Editor

Start your Angular app. Once the server is up and running, open your browser—you’ll see the Unlayer Editor live and functioning.

That’s All! 🚀

Now that you have mastered how to embed Unlayer email builder in Angular, it’s time to see it in action. 

Embed Unlayer in Angular!

Dev-friendly. Customizable. Built to Scale.

Get Started!

Want to Go Further?

Here are a few helpful resources:

• Angular Component Documentation: For full API details & usage pattern 

• GitHub Repository: To view source code & raise issues

• Book a Demo: To see Unlayer in action

Frequently Asked Questions Related to Embedding Unlayer in Your Angular App

Q1: What are the technical requirements for Unlayer integration in Angular?

Umm… you will need:

• An Angular app (v12+ is recommended)

• Node.js and npm or yarn to install angular-email-editor

• Access to app.component.ts

• A browser supporting modern JS and HTML5

• An Unlayer account (optionally) to get premium features and handle domains

Q2: How do you troubleshoot Unlayer embedding issues in an Angular app?

Well, it depends on what type of issue you are facing.

For example, if some features are missing or blocks are not rendering, you might be using the wrong email editor version. If the Unlayer watermark is still there, make sure to whitelist your production domain in the Unlayer console.

Every problem has its own fix, and we have covered them all in detail. Read: Angular Editor Development: Common Pitfalls & How to Fix Them. 

Q3: What is Unlayer’s pricing?

Well, Unlayer offers a forever-free plan with basic Email Builder, Page Builder, Popup Builder, and Document Builder. 

For premium features, Unlayer offers three paid plans: Launch, Scale, and Optimize. These plans start at $250/month, $750/month, and $2000/month, respectively, with a 14-day free trial.

A custom pricing plan is also available for enterprises.

View the pricing page to compare all the plans in depth.