Use Angular ng for debugging in console

Thursday, December 10, 2020

When developing an Angular application you have access to some simple and powerful utilities via the developer console. In development mode Angular exposes an ng object with some helpful functions:

• ng.applyChanges(component)
• ng.getComponent(element)
• ng.getContext(element)
• ng.getDirectives(element)
• ng.getHostElement(componentOrDirective)
• ng.getInjector(elementOrDir)
• ng.getListeners(element)
• ng.getOwningComponent(elementOrDir)
• ng.getRootComponents(elementOrDir)

ng.getComponent may be the most useful of the bunch. To use it open devtools > elements, select an angular component tag using the element selector. This will store a reference to the element in $0. So you can type $0 into the console and see the selected element. Now you can type ng.getComponent($0) into the console and you will see the selected component properties.