Debugging Like a Boss in Angular 9
summary
Angular 9 exposes a console debugging API that surfaces component instances, directives, listeners and context so you can inspect and mutate live state: use ng.getComponent or ng.getOwningComponent to grab an instance, change a property and run ng.applyChanges to force change detection; use ng.getDirectives and ng.getListeners to inspect third‑party directives or call listener callbacks manually. Examples include diagnosing an ngFor where the array content changes but indices don’t, and altering a bootstrap directive’s orientation in the console; API is usable now but marked work‑in‑progress.
AI-written summary · about
chapters (8)
- 0:00Start
- 6:02Get Angular Elements
- 6:13ng.getComponent
- 8:17ng.applyChanges
- 9:09ng.getOwning Component
- 9:56Other Methods
- 11:33Note from the Angular Team
- 20:35Next Steps
related talks
21mDebugging Angular Ivy Applications - DevTools To Our Help! 💪🏼
29mApprehending Your App with Augury
02mAngular DevTools
33mDemystified Angular Directives
14mKick Your Components up a Notch with Directives BAM!
22mIt’s alive! Dynamic components in Angular
21mMad Science with the Angular Compiler
51mUnleashing the power of Angular: Navigating the latest releases and transformations