Implementing advanced DOM manipulation scenarios
summary
Workshop shows concrete fixes and demos: a directive replaces in-component DOM fiddling to call elementRef.nativeElement.setAttribute, then swaps that for Renderer.setAttribute to stay platform independent; removing raw DOM nodes proves unsafe because change detection still runs and views linger (surprising result); templates + a view container are used with ViewContainerRef.createComponent and createEmbeddedView to add, remove and optimize dynamic components; all examples are built and run live so the techniques actually work.
AI-written summary · about
chapters (19)
- 0:00Start
- 6:54Template Reference Variables
- 7:24Element Trap
- 16:55Rendering and Presentation Logic
- 17:23Rendering Logic
- 29:43Renderer
- 30:27Task 1c
- 32:00How Would You Apply Focus with Render -
- 40:28Modifying Existing Dom Structure
- 46:02Inject Element Ref and Renderer into the Constructor
- 1:01:13View Container
- 1:02:17View Container Api
- 1:04:08Structure of Directives
- 1:25:58What Happens if We Have More than One Ng Template
- 1:29:09Dynamic Components Rendering
- 1:29:58Why Do We Need Dynamic Components
- 1:30:42Dynamic Components
- 1:30:54Embedded View
- 1:35:39Implementation
related talks
29mCan't Touch This! What not to do to the DOM
29mInspector Web and the Mystery of the Shadow DOM
31mThe differences between ElementRef, TemplateRef, ViewContainerRef
42mWeb components and the future of web development
35mUp-close with Structural Directives
36mWeb components - A whirlwind tour thru the future of the web
30mReactive parenting with Angular 2
31mNative Web Components - All Frameworks Invited