Rendering Angular components in GrapesJS.

[suryalijo]

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?

[artf]

Not really, you have to create a custom renderer for your components (similar issue but for React #1970). There is also https://github.com/artf/grapesjs-mjml plugin which uses a similar approach to render components from another framework

[suryalijo]

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

[vijaycreatise]

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

@suryalijo Can you please tell me the process how to did you do that? I'm also looking for the same solution.

[suryavijayakumar1315]

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

[vijaycreatise]

@suryavijayakumar1315 thank you will try this.

[Guruk13]

@suryavijayakumar1315

Now use "popup-element" in grapesjs

Hi , can you give some hints on this step ? I've managed to turn a simple Ng Component into a custom element that the browser can interpret in a component.html file , namely <mycustomelement></mycustomelement> But how do you bundle that into grapejs ? i've tried blocks with the tag above but ng is'nt wiring correctly ...

have you used blockManager ? gjs CustomComponents ? gjs ComponentTypes ? Many Thanks PS: #2506 is related to this

[suryavijayakumar1315]

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' });

[Guruk13]

Thanks, My app has a router with eager loading so i guess i should study injectors behaviour Cheers

[FaziHamza]

how to add our angular 14 component in grapesjs with style etc.