The differences between ElementRef, TemplateRef, ViewContainerRef
summary
Explains when ElementRef vs TemplateRef vs ViewContainerRef actually produce DOM nodes and how to instantiate views and components at runtime using the createEmbeddedView and createComponent APIs; shows practical use of NgTemplateOutlet and NgComponentOutlet, the structural directive micro‑syntax that wraps elements in ng‑template, and how inserted views render as siblings anchored by comment nodes; demos Angular Elements and using the Renderer service for platform‑agnostic DOM access and clears common debugging confusions so the examples are reproducible.
AI-written summary · about
chapters (15)
- 0:00Intro
- 0:27Title
- 0:57Why
- 3:07Confusion
- 4:28ElementRef
- 6:21View
- 8:44Containers
- 13:18Accessing ElementRef
- 15:19Debugging ViewContainerRef
- 17:43TemplateRef
- 20:20Create Embedded View
- 21:15Instantiate Embedded View
- 25:57Structural Directives
- 28:42Context
- 30:00Conclusion
related talks
35mUp-close with Structural Directives
06mThe magic of template reference variables
30mReactive parenting with Angular 2
01h 44mImplementing advanced DOM manipulation scenarios
29mCan't Touch This! What not to do to the DOM
23mngTemplateOutlet: The secret to customisation
30mHow Angular works
10mWriting Compound Components in Angular