This project is abandoned, but you can use unlayer natively in Angular #119
Description
I just copy-paste here the basic ChatGPT answer. I tested and worked. Of course you need to implement the events etc, but from this point it's easy.
Unlayer docs: https://docs.unlayer.com/docs/getting-started
Angular Component
Add Unlayer Script to Your Angular Project:
Add the Unlayer script to your index.html file within the src directory of your Angular project.
<!-- index.html -->
<html>
<head>
<!-- Other meta tags, stylesheets, etc. -->
<script src="//editor.unlayer.com/embed.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
Initialize Unlayer in Your Angular Component:
In your Angular component where you want to use Unlayer, initialize it as described in the documentation.
// your-component.component.ts
import { Component } from '@angular/core';
declare var unlayer: any;
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent {
constructor() {
// Initialize Unlayer
unlayer.init({
id: 'editor-container',
projectId: 1234, // Your project ID
displayMode: 'email'
});
}
}
Create the Container Element:
In your component's HTML template, create a container element with the specified ID where Unlayer will be rendered.
<!-- your-component.component.html -->
<div id="editor-container"></div>
Use Your Component:
Use your Angular component (app-your-component) in your application where you want to display the Unlayer editor.
<!-- Some other component's template -->
<app-your-component></app-your-component>