The magic of template reference variables

on YouTube ↗06m

" summary

Shows that template reference variables using #ref syntax give direct access to the HTML element or to a component instance so templates can call methods or read properties without ngModel, documents that JIT allows access even to private/protected members while AOT can block that, explains how directives expose names via exportAs and how those names bind to form validation, and demonstrates retrieving the same references in TypeScript with @ViewChild so the examples actually run and the feature works end to end.

AI-written summary · about

" chapters (10)

1. 0:00Intro
2. 0:18Story of this start
3. 0:50Abstract Syntax
4. 1:09Using Abstract Syntax
5. 1:47Abstract Syntax on Components
6. 2:35Syntax on Directives
7. 3:26How does it work
8. 3:44Source code
9. 5:09Summary
10. 5:40Outro

" related talks

• 31mThe differences between ElementRef, TemplateRef, ViewContainerRefAshnita Bali, Marcin Ryzycki · Angular Connect 2018
• 23mngTemplateOutlet: The secret to customisationStephen Cooper · AngularConnect 2019
• 35mUp-close with Structural DirectivesAshnita Bali · NG-BE 2018
• 33mDemystified Angular DirectivesNir Kaufman · JSPoland Conf 2017
• 30mHow Angular worksKara Erickson · AngularConnect 2019
• 12mTyping the not so secret to customisation ngTemplateOutletStephen Cooper · ng-conf 2023
• 26mMaster Tooling by Hacking the Angular CompilerDominic Elm · NG-BE 2019
• 30mReactive parenting with Angular 2Pawel Kozlowski · NG-BE 2016