feature: show component name when selected with mouse

[born2net]

Hi guys,
great job on this project!
one thing that is most desired is the ability to select a component with the mouse, and have Augury show you the component name (props etc would be nice, but component name would be most useful).

Is this available? or missing feature?
I would imagine it would be the first feature to be added as I am working on a VERY large scale ng2 app with hundreds of components and it's hard for me (and new devs) to know which component is which, this would be a tremendous help!

I know you can navigate the tree in the Augury console, but being able to do it on the UI (kind of like what google has with mouse selection on HTML elements) would be awesome!

(see below for the google equivalent arrow icon for HTML)

Angular 2 Kitchen sink: http://ng2.javascriptninja.io
and source@ https://github.com/born2net/ng2Boilerplate
Regards,

Sean

[xorgy]

This is an excellent idea and we're looking in to it.

[born2net]

GREAT tx...
FYI, what I have done as a workaround in my is to add to each template:
<small class="debug">{{me}}</small>
and in controller I do:

this['me'] = Lib.GetCompSelector(this.constructor)

and GetCompSelector is:

static GetCompSelector(i_constructor){
        var annotations = Reflect.getMetadata('annotations', i_constructor);
        var componentMetadata = annotations.find(annotation => {
            return (annotation instanceof ComponentMetadata);
        });
        return componentMetadata.selector;
    }

and the end result is what you see here:

and I can simply disable it in release mode via CSS.

Angular 2 Kitchen sink: http://ng2.javascriptninja.io
and source@ https://github.com/born2net/ng2Boilerplate
Regards,

Sean

[born2net]

just wondering if any news on this..
tx as always...

[mobinni]

@born2net I started researching this feature request, and started with a base implementation. Once we discuss it with the team further I'll be able to give you an update.

[born2net]

Great, appreciate it!!!!