Angular Template Type-Checking

on YouTube ↗22m

" summary

Angular 9+ with Ivy adds three template type checking levels that catch template bugs earlier: basic/full/strict modes. The compiler now checks bindings, embedded views (NgFor), $event types, and pipes; strict mode validates deeper property types and makes $event strongly typed. Toggle with fullTemplateTypeCheck and strictTemplates flags in tsconfig.json. A Microsoft study found ~15% of JS bugs are preventable with types. Example fixes include correcting undefined/null bindings, enforcing pipe input types, and using static coercion hints like ngAcceptInputType_back to allow attribute-style booleans.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 2:25Research Study
3. 5:07Strict Templates
4. 5:18Example
5. 9:26Dollar Event Object
6. 10:11Embedded View
7. 16:57Amount Change Event Emitter
8. 20:37How Do You Get to Strict Mode

" related talks

• 22mStronger Type-Checking in Templates with IvyAlex Rickabaugh · ng-conf 2020: Hardwired
• 06mThe Phantom of the Template ErrorBrian F Love · ng-conf 2020: Hardwired
• 31mGetting to Know the Template Type CheckerJoost Koehoorn · NG-BE 2021
• 40mIvy Renderer for DummiesGerard Sans · ComponentsConf 2019
• 11mMatt Bierner - SeattleJS Conference 2017Matt Bierner · SeattleJS Conference 2017
• 30mHow Angular worksKara Erickson · AngularConnect 2019
• 19mHow Typed is Your Framework?Andreas Roth · React Advanced 2021
• 26mMaster Tooling by Hacking the Angular CompilerDominic Elm · NG-BE 2019