Best practice to Building a Dynamic, Elementor-like Page Builder with Angular and a Headless...

We've developed a CMS with an API-first approach and built our frontend using Angular. However, we're encountering a significant bottleneck: for each new client, we currently create and build a separate Angular project, which is a time-consuming process.

We're looking to implement a solution similar to the Elementor plugin in WordPress. Our goal is to allow site administrators to construct any page within the admin panel by dragging and dropping pre-built modules onto the page. When a regular user views that page, everything should render correctly.

These modules also need to be highly dynamic. For example, an admin should be able to add a "News List" module to a news page. Within the module's settings, users should be able to define the HTML template and styling, and utilize tokens like ##THE_TITLE## for dynamic content (e.g., news article titles).

Our core challenge is: How can we implement this such that Angular components are generated and rendered at runtime, without negatively impacting SEO?

We're looking for guidance on the best architectural patterns and specific Angular techniques to achieve this. Any insights on dynamic component loading, template compilation, and SEO considerations for such a setup would be greatly appreciated.

Continue reading...