Rendering Angular components in GrapesJS.
Question
Rendering Angular components in GrapesJS.
I am creating an Angular editor with GrapesJS. I am able to integrate GrapesJS in my Angular project and I also created custom components and blocks that can be used to build tools. Is there a way to render Angular components directly into Grapes JS editor?
Answers (3)
Thanks, I was able to render angular components in gjs by using createCustomElement.

Add AngularComponent as entryComponents in the app module, then import createCustomElement like given below
import { createCustomElement } from '@angular/elements';
export class AppComponent {
constructor( injector: Injector ) {
customElements.define('popup-element', createCustomElement(AngularComponent, {injector}));
}
Now use "popup-element" in grapesjs
I am using the custom element like this in Block Manager
this.editor.BlockManager.add('block_name' , {
label: 'label',
type: 'type',
content: <div><mycustomelement></mycustomelement></div>
category: 'category_name'
});
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3223
FEAT: Create the canvas from a URL
I've been playing with GrapesJS and trying to integrate it into a Symfony 5 project. In particular I want to be able to edit templates in t...
Issue #3100
Adding external libraries after dragging custom block
Hi, I am customizing GrapesJS by creating components/blocks my users can drag onto the canvas. A number of these blocks depend upon externa...
Issue #1047
[BUG] Model not able to change after changing value in custom Select dropdown menu.
Hey, I'm using CDN link for grapes js from unpkg.com In my project, I've used custom trait as a drop-down select menu which changes HTML us...
Issue #1492
Creating Custom Multiple Block Managers
Is there a way to generate multiple block managers where you click on a command button and a set on specific components are listed in the v...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.