Demystified Angular Directives

on YouTube ↗33m

" summary

Live coding reimplements core directives so the page shows exactly how ngIf, ngFor, ngModel and ngClass are built and wired — Angular CLI project, ng-template expansion, TemplateRef and ViewContainerRef for structural directives, Renderer for class manipulation, and Input/Output + EventEmitter for banana-in-a-box two‑way binding. The demo produces ddIf, ddFor, ddCounter and ddClass components that mostly work with small live‑coding hiccups, proving the claim that directives are simple once the compiler’s transformations are understood.

AI-written summary · about

" chapters (8)

1. 0:00Intro
2. 2:00Nir Kaufman
3. 3:00Directives
4. 4:45Magic
5. 6:10NGS
6. 13:55Code
7. 21:55Banana in the Box
8. 27:40NG Class

" related talks

• 14mKick Your Components up a Notch with Directives BAM!Mike Brocchi · ng-conf 2017
• 40mAdvanced UI, Plugins and Components in AngularJSMatias Niemelä · Spotlight: AngularJS 2014
• 35mUp-close with Structural DirectivesAshnita Bali · NG-BE 2018
• 30mReactive parenting with Angular 2Pawel Kozlowski · NG-BE 2016
• 01h 00mIntroduction to Angular 8Alain Chautard · NDC Sydney 2019
• 30mHow Angular worksKara Erickson · AngularConnect 2019
• 06mThe magic of template reference variablesAlain Chautard · NGConf 2018
• 22mIt’s alive! Dynamic components in AngularShmuela Jacobs · NG Poland 2018