How to add the angular component Inside GrapesJS Block #6159
Unanswered
DevPHioNiX
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
WebBuilderComponent
`export class WebBuilderComponent implements OnInit {
@ViewChild('editor', { static: true }) editorRef!: ElementRef;
constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
ngOnInit() {
if (isPlatformBrowser(this.platformId)) {
const editor = grapesjs.init({
container: '#gjs',
fromElement: true,
height: '100%',
width: '100%',
storageManager: { autoload: false },
plugins: ['gjs-custom-code', 'gjs-plugin-ckeditor'],
blockManager: {
appendTo: '#blocks',
blocks: [
{
id: 'empty-mobile-container',
label: 'Empty Mobile Container',
attributes: { class: 'gjs-block-mobile-container' },
content:
<section><app-text></app-text></section>
,category: 'Mobile Blocks',
},
{
id: 'section', // id is mandatory
label: 'Section', // You can use HTML/SVG inside labels
attributes: { class:'gjs-block-section' },
content:
<section> <h1>This is a simple title</h1> <div>This is just a Lorem text: Lorem ipsum dolor sit amet</div> </section>
,category: 'Mobile Blocks',
},
{
id: 'text',
label: 'Text',
content: '
}, {
id: 'image',
label: 'Image',
// Select the component once it's dropped
select: true,
// You can pass components as a JSON instead of a simple HTML string,
// in this case we also use a defined component type
image
content: { type: 'image' },
// This triggers
active
event on dropped components and theimage
// reacts by opening the AssetManager
activate: true,
}
]
},
});
editor.setDevice('Mobile portrait');
}
}
}`
the above code is my custom component code and in that, I have used grapesJs and after that, this component was rendered on my appComponent.
now as you can see in the content I want to render my angular component but that's not working and I want to know how can I use my custom component in that.
Here I called component
{ id: 'empty-mobile-container', label: '<b>Empty Mobile Container</b>', attributes: { class: 'gjs-block-mobile-container' }, content:
, category: 'Mobile Blocks', },
it would be grate help for me if I can achieve this functionality.
Beta Was this translation helpful? Give feedback.
All reactions