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.
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.