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
-
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