Clean Up Your Dom By Using The Full Power Of Angular Host Elements
summary
Claims that Angular DOM bloat drops by removing wrapper elements and moving behavior onto the host element, demonstrated with concrete patterns: host bindings (classes, CSS variables, Tailwind), @HostListeners for events, host directives to attach standalone directives and forward inputs/outputs, attribute/component selectors to enhance native elements, and control-flow alternatives using ng-container or display:contents (with the caveat that display:contents makes the element disappear). Examples show these techniques working and note limits around structural directives and CSS/encapsulation tradeoffs.
AI-written summary · about
chapters (14)
- 0:00Angular host elements
- 2:07Introduction
- 4:55Excessive DOM nesting problems
- 7:05Host bindings for attributes
- 9:54Host selector and stylesheets
- 12:47Host event bindings
- 14:33Host directives for logic
- 17:02Host properties in directives
- 19:50Components with attribute selectors
- 21:59Structural directives and host elements
- 23:31Clean DOM with display contents
- 24:37Angular host element wish list
- 27:08Host element techniques summary
- 27:56Q&A
related talks
25mWeb components with Angular: The what, the why and the how.
01h 18mA Deep Look At Angular Elements
29mCan't Touch This! What not to do to the DOM
06mQuick Context about Host Context
28mAngular Elements
34mAngular Elements
19mWeb Components with Angular Elements: Beyond the Basics
14mKick Your Components up a Notch with Directives BAM!