Can't Touch This! What not to do to the DOM
summary
Argues that direct DOM calls break cross‑platform code and shows concrete fixes: use Renderer service to change element properties (browser, server Domino and web‑worker renderers implement it) and use ViewContainerRef/ng-template to create or remove views so the framework keeps view state consistent. Demonstrates a custom renderer that adds a created‑by‑angular class, shows web‑worker renderer relays messages, and proves removing a DOM node without the view causes lingering view nodes and a memory/leak and change‑detection cost.
AI-written summary · about
chapters (21)
- 0:00Intro
- 1:31Topics we'll cover
- 2:10Presentation and rendering logic
- 3:58Correct mindset
- 5:06Using custom addAttribute directive
- 5:37Implementating addAttribute directive
- 6:08Platform dependence
- 6:39Native DOM API on different platforms
- 7:49Tools to work with DOM safely
- 9:26Renderer (Renderer2)
- 9:55Using Renderer service
- 11:15Rendering layer architecture
- 13:11Dedicated renderer Browser platform
- 14:04Rendering layer abstractions
- 16:42Working with DOM safely
- 17:24Unexpected behavior with Renderer
- 19:41Transforming Component to View
- 20:52DOM and View relationship
- 22:58View Container (ViewContainer Ref)
- 24:46Using templating and view container
- 27:19Conclusions
related talks
01h 44mImplementing advanced DOM manipulation scenarios
39mDOM it, forgive, forget, embrace
32mClean Up Your Dom By Using The Full Power Of Angular Host Elements
31mThe differences between ElementRef, TemplateRef, ViewContainerRef
40mDOM as a Second-class Citizen
17mRendering in Angular 2
29mDeveloper and the DOM - A history of manipulation and abstraction
30mReactive parenting with Angular 2