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.

Code Examples


Tom Eustace

Reformed Java developer specializing in frontend technologies, mostly Angular (Nx), Svelte, Vue and D3.

Have a question or comment?