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
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.
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.