A Deep Look At Angular Elements
summary
Shows how Angular components become framework‑independent web components using createCustomElement and customElements.define, packs a dashboard tile with ngx‑charts into an element and runs it in StackBlitz, requires the ES5 adapter polyfill (or differential loading) to avoid modern browser failures, demonstrates Shadow DOM + slots for isolated styling and content projection, replaces async/zone work with a push pipe or manual ChangeDetectorRef to go zoneless, and measures bundle sizes (an external bundle at 426 KB then shrunk via externals to ~9K using ng-x-plus).
AI-written summary · about
chapters (12)
- 0:00Introduction to the workshop
- 5:05Web components basics
- 10:41Integrating angular elements
- 17:04Polyfills and compatibility
- 24:56Differential loading
- 28:56Shadow DOM and styling
- 35:12Dynamic element injection
- 40:04Lazy loading components
- 45:15External web components
- 52:48Optimizing bundle sizes
- 1:00:13Zone.js and change detection
- 1:06:43Content projection with slots
related talks
25mWeb components with Angular: The what, the why and the how.
28mAngular Elements
25mI'm with Web Components and Web Components Are with Me
33mBuild Web Components with Angular Elements
28mAngular Elements: From Angular to Web Components
34mAngular Elements
28mAngular and Webcomponents
34mAngular Elements