Angular + Web Components by Armen Vardanyan (Arm) | JSConfAM19
summary
Shows concrete steps to turn Angular components into Angular Elements custom elements, with a working button-with-counter example and code that registers a component as a native HTML tag. Uses Angular Elements, polyfills, Shadow DOM and standard custom events, and discusses dependency-injection and change-detection gotchas. Demonstrates that it works but increases bundle size and complicates SSR and lazy loading, and gives practical mitigations and build-time optimization tips.
AI-written summary · about
chapters (14)
- 0:00Angular and Web Components intro
- 3:17Web Components importance
- 6:09Simple component with Angular Elements
- 9:20Integration strategies
- 12:11Custom elements ecosystem
- 15:38Custom elements with Angular Elements
- 18:26Event handling
- 21:17Content projection & Shadow DOM
- 24:08Performance considerations
- 26:58Use cases & applications
- 29:45Best practices
- 32:02Cross-browser compatibility
- 33:49Optimization techniques
- 34:32Q&A
