How to effectively traverse angular code in visual studio code

Question

I'm developing Angular application in visual studio code.

Currently, I'm using search to trace and traverse component usages. Is it possible to show component hierarchy for angular components familiar to function call hierarchy? Also, is there a shortcut to jump between component implementation and html template? Lastly, I would like to navigate component inputs and outputs easily.

Answer 1

Angular Language Service is the best thing I know for VS Code.

I get used to WebStorm. It can show you the usages of the component across the project like this:

enter image description here

Also, Compodoc could be a good option while it's not exactly what you are looking for. Take a look at the example of the diagram of the Angular app. It includes not only components but also modules, services, and other artifacts.

excerpt from Angular app diagramm

• Tuomas Toivonen: This is good for documentation, but doesn't enable me to traverse the code easily
• IAfanasov: please forgive my English, I misunderstand the word "traverse" (: I update the answer. Still not a perfect answer. I hope it would be helpful.