Angularjs components as grapesjs components
Question
Hey artf,
first gratulations to this awesome project, i really enjoy using it. Second: this is NOT about running grapesjs within an angular project, its more the exact opposite: grapesjs already runs fine as a angular 6 component. What i want to do is to use other angular-components within the grapesjs canvas. On the main page the component (just some helloworld) works without any problems next to the grapesjs component, which looks like the following:
<demo-component></demo-component> <grapesjs-component></grapesjs-component>
demo-component renders as it should as
\<demo-component _ngcontent-c0="" _nghost-c1=""> \<h1 _ngcontent-c1="">DEMO HERE\</h1> \</demo-component>
Put the whole bunch of angular deps as scripts in the canvas, they seem to load successfully according to the network tab in the browser. I also made a custom block for the component, and dragged it into the canvas.
... canvas: { scripts: [ '/vendor.js', '/main.js', '/polyfills.js', '/runtime.js', '/scripts.js', '/styles.js', ] },
Looking at the html export "preview" i see the custom element - as expected
<demo-component> </demo-component>
The only problem is that i dont see its angular representation. Looking at the rendered code in the iframe of the preview-window i think i know why - i dont see any script tags there. Am i right and those scripts should be in there when i specify them in the iframe (or i got something wrong on https://grapesjs.com/docs/modules/Components-js.html#dependencies). Or is there a better grapesjs'ish solution to achieve angular components as components in grapes?
Thanks a lot and Cheers
Answers (2)
All custom scripts loaded via canvas.scripts are loaded BEFORE components, so if you try to mount on something obviously it doesn't work. Probably you need also make use of Component related scripts
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1906
Components & Js - Load Template
Hey, I have a component which has a JS attached to it. Everything is created using the JS. When I drag and drop my block for the first time...
Issue #1673
[Issue] Grapesjs not working when use with mobile devices(iphone,ipad)
First, thank you for creating this awesome framework @artf. I integrated this framework with my project and i want it to be used through mo...
Issue #429
custom component save
hi @artf sorry to be a pain i really didn't want to open a issue ticket but i have been stuck for days trying to achieve my end goal i have...
Issue #1113
[QUESTIONS] New trait type is not working with rendered components?
Hello, thanks for the great framework. I'm trying to apply this to my project. I want to add a new trait for existing LINK '<a>' component....
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.