Creating Custom Structural Directives
summary
Builds one concrete structural directive named appDeclareVar and shows working code: uses TemplateRef and ViewContainerRef via dependency injection, creates embedded views with viewContainer.createEmbeddedView(templateRef, context), exposes a typed context object with context.$implicit and additional properties, wires inputs with a setter tied to the directive attribute name, parses the microsyntax, demonstrates change detection with async pipes and an observable, and verifies the directive works in a live demo.
AI-written summary · about
chapters (6)
- 0:00Understanding directives
- 2:46Core building blocks
- 5:32TemplateRef and views
- 8:59ViewContainerRef explained
- 12:21Planning custom directives
- 19:48Implementing the directive
related talks
35mUp-close with Structural Directives
33mDemystified Angular Directives
01h 44mImplementing advanced DOM manipulation scenarios
30mHow Angular works
25mAdvanced DI
31mThe differences between ElementRef, TemplateRef, ViewContainerRef
06mThe magic of template reference variables
14mKick Your Components up a Notch with Directives BAM!