how to access Angular2 component specific data in console?

Question

Is there any way to access Angular2 specific component specific data in console, for debugging purpose?

Like Angular1 has capability to access its components value i

Answer 1

First select the element using chrome 'inspect element' and run below method in chrome 'developer console'.

ng.probe($0).componentInstance

You could also use a css selector as shown below.

ng.probe($$('.image-picker')[0]).componentInstance

If you do it often, to make it little easier, have a global shortcut created as below. Now select any DOM element inside the component using 'inspect element' and invoke 'e()' from console

window['e'] = () => eval('ng.probe($0).componentInstance');