Creating Container Components with Web Components and Angular

on YouTube ↗21m

" summary

Shows how OpenTable's layout scaffold is implemented end to end: a native Web Component using createShadowRoot and content tags with Select to project user blocks, the gotchas of projection vs actual DOM, and a working Angular 1.3 equivalence that implements custom transclusion by cloning the user nodes and matching a transclude-to attribute using the transclude function in the link phase. Demonstrates the final Angular 2 reduction to a component class plus annotations and native content slots, with working samples.

AI-written summary · about

" chapters (4)

1. 0:00Start
2. 3:31Web Components
3. 9:55Angular 1.3
4. 10:30Transclusion

" related talks

• 25mWeb components with Angular: The what, the why and the how.Ana Cidre · ngAtlanta 2019
• 25mI'm with Web Components and Web Components Are with MeGil Fink · AngularUP 2019
• 48mBuilding reusable Web components with AngularSherry List · Jfokus 2019
• 01h 18mA Deep Look At Angular ElementsManfred Steyer · ng-conf 2019
• 32mLet's talk about Web ComponentsJemima Abu · React Advanced 2021
• 28mAngular Elements: From Angular to Web ComponentsMichele Stieven · Angular Day 2018
• 33mBuild Web Components with Angular ElementsArjay Elbore · NG-MY 2019
• 34mAngular ElementsRaúl Jiménez · DevFest Toulouse 2018