A practical guide to embedding Vaadin server-side components into an Angular application using the Web Components standard. The approach lets backend teams own complex grid logic in Java (with direct JPA access, no REST layer) while Angular handles routing, state, and frontend UX. Key steps covered include adding Vaadin to Spring Boot, building a server-side Grid component, exporting it via WebComponentExporter as a custom element, configuring Angular's dev proxy for Vaadin WebSocket traffic, registering the custom element with CUSTOM_ELEMENTS_SCHEMA, and styling via CSS custom properties. The post also discusses a syncRevision trick to force attribute change detection and notes production considerations like session affinity for load-balanced deployments.
Table of contents
Vaadin components as Web ComponentsAdd Vaadin to Spring BootBuild a server-side Grid componentExport as a Web ComponentProxy traffic from the Angular dev serverEmbed the Custom Element in AngularStyling Vaadin from AngularBut you broke the team boundary?What we learned and what to improve?Sort: