Custom Component Integration

Ok, but what will you do with the output (Angular components) of the editor? I mean, how you will use it at the end? Anyway, I see two different approaches to this kind of situation:

1. Create a custom render for each component (the exact thing/concept I've made with MJML). This is the most accurate approach because I should see in the canvas the exact component of the framework (eg. obviously if the renderer uses the same "compiler", in your case the Angular framework). Probably not the easiest approach as you have to grasp a good knowledge about both frameworks (eg. in your case Angular and GrapesJS) but for sure the best in the long term, once the renderer is implemented new components could be integrated without any hassle

2. You can create a kind of placeholder component, when the result will be always an HTML of your Angular components but the view is totally up to you to build. Example:

editor.DomComponents.addType('InputGroup', {
	model: {
		defaults: {
			// The tag name that will be used in the final code
			tagName: 'InputGroup',
			attributes: { customProp: 'val1' },
			// You would use traits to customize custom properties
			traits: [
				{
					type: 'select',
					name: 'customProp',
					options: [
						{ value: 'val1', name: 'Value 1' },
						{ value: 'val2', name: 'Value 2' },
					]
				}
			]
		}
	},
	view: {
		// eg. You can customize the tag in the canvas
		// By default, the view will use the same tag of the model
		tagName: 'div',
		onRender() {
			// What the user see in the canvas is totally up to you
			// it can be a simple image as a placeholder or
			// you can make it as much close to the original markup
			const attrs = this.model.getAttributes();
			this.el.innerHTML = `<div>
				My custom HTML for this component<br>
				My custom prop: ${attrs['customProp']}
			</div>`;
		}
	}
});

This is the easiest but as you can see you have to setup a new view for each component.

@adelliinaa let's start from a simple question because I don't understand, what kind of editor are you trying to create? A builder for Angular components?!?

I want to create a form builder similar to the one which you created with the MJML components, but using Angular CLI instead of JS. And yes, the customed components which I want to integrate within GrapesJS are built in Angular as well.