Issue #3074Opened October 15, 2020by suryalijo5 reactions

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)

suryalijoOctober 16, 20203 reactions

Thanks, I was able to render angular components in gjs by using createCustomElement. image

suryavijayakumar1315November 9, 20201 reactions

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

suryavijayakumar1315July 2, 20211 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.