Is there any way in VSCode to jump to the Angular component that defines a tag, by clicking on the tag?

Question

I'm coding an Angular application using VSCode and sometimes I want to learn more about a tag that I come across.

For example, let's say I encounter a tag <display-active-users> and I want to determine some details about how it was implemented. Currently, to find the component file for this I do I a file search (Ctrl + P) and hopefull find a file named display.... If not, I do a full text search for display-active-users.

However, it would be much more ideal if I could just right click, or press some shortcut key on my keyboard, on <display-active-users> and be taken to the component file.

Is there any way to do this?

Taste

You could install the plug in "Angular Language Service", after that just need to Ctrl+Click the tag to go to the component definition. – Alicealicea

That's awesome. Sounds like exactly what I am looking for – Taste

An alternative could be the extension "Angular Follow Selector". It doesn't feel as heavy as the language service for me. – Tyrolienne

ctrl + tab ... ctrl + shift + tab – Disenthral

Answer 1

You should install this plugin-

Angular Essentials

ext install angular-essentials

This extension pack for Visual Studio Code adds extensions that are amazingly useful for Angular development.

Culch

Instead, use "Angular Follow Selector" – Boorer

I did but it didn't work. I clicked it with command + click and nothing happed – Castlereagh

Not working with angular 2 – Infundibuliform

Answer 2

You can install the following extension:

Angular Component Extension

So you don't need to install a set of extensions.

Galasyn

Definitely works – Infundibuliform

October, 2023, using Angular 15, and this is the only solution that worked, now. Angular Language Service didn't do the trick. – Phosphor