Web components with Angular: The what, the why and the how.
summary
Claims that web components give true cross‑framework reuse and style isolation, demonstrates a working "bb-card" element implemented with shadow DOM and slots, shows use of CSS custom properties and :host to avoid div soup, builds Angular Elements using createCustomElement and polyfills, sets tsconfig target to ES2015 and remembers to set display:block, and recommends ngx-build-plus as a temporary build solution while Angular CLI support matures.
AI-written summary · about
chapters (37)
- 0:00Introduction
- 1:20Agenda
- 2:05Componentbased architecture
- 3:18Whats missing
- 4:23What does it have
- 5:43HTML Template
- 6:49JavaScript
- 7:41Custom elements
- 8:19Naming custom elements
- 8:41Naming attributes
- 9:14Comparing methods
- 9:33Naming
- 9:53Creating a custom element
- 10:54Change callback
- 11:35Shadow DOM
- 11:53Clone DOM
- 12:10Slots
- 12:31Slots code
- 12:46Slots attributes
- 13:14CSS custom properties
- 13:40CSS custom variables
- 14:14CSS host
- 14:45Shadow root
- 16:08Angular
- 16:29Installing Angular
- 17:00Importing Polyfills
- 17:16Generating Component
- 17:38Angular Friendly
- 17:49Inputs
- 18:01Host
- 18:31Register Component
- 19:37NGXBuild
- 20:08Result
- 20:21How
- 20:52Why
- 21:37Can we say that web components rock
- 22:12Browser stability
related talks
25mI'm with Web Components and Web Components Are with Me
01h 18mA Deep Look At Angular Elements
33mBuild Web Components with Angular Elements
28mAngular and Webcomponents
48mBuilding reusable Web components with Angular
19mWeb Components with Angular Elements: Beyond the Basics
28mAngular Elements: From Angular to Web Components
37mThe world of Web Components