Angular Component | Unlayer Help Center

This guide explains how to embed the Unlayer Builder inside an Angular application using the angular-email-editor package.

Installation

Install the angular-email-editor package using npm:

npm install angular-email-editor --save

Using yarn:

yarn add angular-email-editor

Do not include embed.js manually in index.html file. The wrapper handles script loading and editor lifecycle internally.

Usage

To embed the builder in your Angular app:

1. Routing Setup

While creating the routes, create direct routing to the Unlayer editor component.

import { Routes } from '@angular/router'; 
import { UnlayerEditorComponent } from './unlayer-editor/unlayer-editor.component';  
export const routes: Routes = [   { path: '', component: UnlayerEditorComponent }, ];

2. Create Unlayer Editor Component.

In your Angular project, create a new file inside the src/app/ directory (for example, unlayer-editor.component.ts).

import { Component, ViewChild } from '@angular/core'; 
import { EmailEditorComponent, EmailEditorModule } from 'angular-email-editor';  
@Component({
   selector: 'app-unlayer-editor',
   standalone: true,
   imports: [EmailEditorModule],
   templateUrl:'./unlayer-editor.component.html',
   styleUrls: ['./unlayer-editor.component.css'],
 }) 
export class UnlayerEditorComponent {   
 @ViewChild(EmailEditorComponent)   
 private emailEditor!: EmailEditorComponent;

 editorOptions: EmailEditorComponent['options'] = {
     projectId: 12345,
     displayMode: 'web',
     appearance: {
       theme: 'modern_dark',
     },
   };
    private get unlayer() {
     return this.emailEditor.editor;
   }
    editorLoaded() {
     console.log('editorLoaded');
      
     this.unlayer.addEventListener('editor:ready', () => {
       console.log('editor:ready');
     });
   }

Now add the html file for the component (for example, unlayer-editor.component.html)

<email-editor
   #editor
   [options]="editorOptions"
   (loaded)="editorLoaded()"
   (ready)="editorReady($event)"
   style="height: 100vh;"
></email-editor>

Import the Email Editor Component in the component file from the npm package. Pass the html and css in the @Component part then instantiate the UnlayerEditorComponent class and pass the editor configurations in the editorOptions . You can pass configuration like projectId, displayMode, mergeTags etc.

3. Import and Use the Editor

In the app.ts file add the following code to import the Unlayer component in the application:

import { Component, signal } from '@angular/core'; 
import { RouterOutlet, provideRouter } from '@angular/router'; 
import { routes } from './app.routes'; 
import { bootstrapApplication } from '@angular/platform-browser';  

// No need to import UnlayerEditorComponent here unless you want to use it directly in template  

@Component({
   selector: 'app-root',
   standalone: true,
   imports: [RouterOutlet],
   templateUrl: './app.html',
   styleUrl: './app.css' 
}) 
export class App {
   protected readonly title = signal('unlayer-editor'); 
}  
// Bootstrap the app with routes 
bootstrapApplication(App, {
   providers: [provideRouter(routes)], 
});

Once embedded, the builder will load within your app and reflect the configuration specified via the editorOptions prop.

Setting “displayMode” Programmatically:

You can also set the displayMode programmatically using the following method.

this.emailEditor.editor.setDisplayMode('web');

You can call this method in a button implementation or on the onReady/onLoad callbacks to switch the displayMode on run time.