How to add the angular component Inside GrapesJS Block

The below code is my custom component code, in which I have used GrapesJS.

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: '<b>Empty Mobile Container</b>',
attributes: { class: 'gjs-block-mobile-container' },
content: `<section><app-text></app-text></section>`,
category: 'Mobile Blocks',
},
{
id: 'section', // id is mandatory
label: '<b>Section</b>', // 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: '<div data-gjs-type="text">Insert your text here</div>',
}, {
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 the `image`
// reacts by opening the AssetManager
activate: true,
}
]
},
});
editor.setDevice('Mobile portrait');
}
}
}


After that, this component was rendered on my AppComponent here:

{
id: 'empty-mobile-container',
label: '<b>Empty Mobile Container</b>',
attributes: { class: 'gjs-block-mobile-container' },
content: `<section><app-text></app-text></section>`,
category: 'Mobile Blocks',
},


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 there, in a GrapesJS Block.

Continue reading...