Angular with Grapesjs
Question
Hi I want to integrate Grapesjs into my angular application. Suppose I have a custom dropdown component (containing .ts, .html and .scss files) as shown shown below: CustomDropdown.html---------------------------------- <div class="cust-dropwodn-container"> <span>Some header</span> <select ngIf="shouldDropdownBePresent" class="select-class"> <option ngFor="let optionVal of optionsArr"> {{ optionVal.value }} </option> </select> <button (onClick)="callEventFunction()">Some event click</button> </div> CustomDropdown.ts------------------------------ --- shouldDropdownBePresent: boolean = false; @...
Answers (2)
Any updates @artf?
No @Khan-Uzair by default GrapesJS doesn't read any framework related components... please read more about GrapesJS components here
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1448
Child component not selectable when using custom view
I'm trying to create a custom component that creates it's own view with nested HTML. I do not want this HTML to be rendered as a component...
Issue #460
When the component's view modifies the HTML, text components are no longer editable
I'm trying to build a custom component that contains some lorem ipsum text in the content, for editing once it's on the canvas. But I also...
Issue #1157
Return span randomly in custom component
I have custom component and on trait change wanted to updated html but randomly it returned span/textnode in trait change function insted o...
Issue #2170
Custom component - how to set editable to true
Hi, I've created a custom component type, but I am having some trouble making it editable. The component is a "span" with component type "t...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins โPremium plugins ship with support, regular updates, and production-ready features โ save days of integration work.
Browse premium plugins โRelated tutorials
In-depth guides on the same topic.
Tutorial
GJS.Market Is Now Available for India ๐ฎ๐ณ
GJS.Market is expanding its global presence with a dedicated experience for developers, agencies, SaaS companies, and digital creators in India
Tutorial
GrapesJS vs Webflow vs Builder.io vs Puck: Which Visual Builder to Choose in 2026
A practitioner's 2026 comparison of GrapesJS, Webflow, Builder.io, and Puck โ pricing, AI features, lock-in, and a one-line rule for picking the right one
Tutorial
How to Build a Drag-and-Drop Page Builder in Angular Using GrapesJS (Step-by-Step Guide + Code)
Build a visual drag-and-drop page builder in Angular with GrapesJS. Learn setup, plugins, and backend saving in this full code guide.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.