Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Profile photo of Brian Fernandes
Brian Fernandes
Director of Customer Engagement - Loves technology and almost everything related to computing. Wants to help you write better software. Follow at @brianfernandes.

You might now be familiar with easy cruising through a Webclipse or an Eclipse project after reading our blog or thanks to a personal experience, but what if you are more of an Angular guy or gal? No worries, breezy navigation is also a reality for Angular projects.

This video will give you some useful tips on how to navigate both between files, and within them by using an Open TypeScript Symbol dialog as an example. Simply watch this video below to to learn how to work your way through an Angular project very easily, or read through our notes.

Navigating Between Files

Open TypeScript Symbol Dialog

Open the Open TypeScript Symbol dialog using Ctrl + Shift + T, or the button on the toolbar. Simply type in the symbol name to find the one you are interested in.


  • You could also use the initialism notation to filter to symbols – “PL” to filter ProductList, for example.
  • Use Ctrl + Shift + R to open just about any file in your workspace, with a similar, filterable dialog.


Breadcrumb Toolbar

If you’re exploring a new code base or just dealing with a group of related files, use the toolbar to easily jump between them.


MyEclipse Explorer / Project Explorer+

Use the filter at the top of the view to search for files and folders whose names match the text typed in.


Miscellaneous Shortcuts

  • Ctrl + E to open a filter listing files that are currently open, or Ctrl + Shift + E for a more detailed dialog.
  • Ctrl + F6 to cycle through open files.


Testing your Angular application in a browser, but need to get to the source quickly to make a change? Use CodeLive to quickly locate the source for Angular components. See this article for more details.

Navigating through Code

Hyperlink Navigation

Enable hyperlink navigation by pressing Ctrl and then hovering over items of interest. Just click to navigate to a file in which the element is defined — could be another location in the current file too.


The minimap is an excellent graphical outline, great for moving quickly through larger files.

Quick Outline

While everyone is familiar with how the Outline view works, the quick outline makes navigation much faster. Press Ctrl + O to bring up the quick outline and just start typing to move to the element of interest.
Tip: You can press Ctrl + O a second time to show inherited members.

Edit Locations and Annotations

Use Ctrl + Q to jump to the last edit location, this is great for quickly getting back to a modification you’ve just made. If you need to skip further behind, or ahead, use Alt + Left Arrow or Alt + Right Arrow, respectively.

If you’d like to jump through errors or warnings, use Ctrl + , and Ctrl + . to jump backwards and forwards, respectively. This is handy when fixing errors in your code, or maintaining an older codebase.

Even if you are new to Angular, as you can see, there are no reasons to be intimidated even by sizable projects. If, on the other hand, you’ve been at it for awhile, here’s a quick reminder of all the amazing navigation aids available to make your coding experience like a sail into the sunset on a beautiful lagoon (not a shark-infested stormy sea). Remember, most of these shortcuts aren’t specific to Angular projects, so try them everywhere!

Related Posts

Enhanced Code Navigation Made Possible with Webcli... There are more reasons to love our Webclipse -- navigating through your Eclipse code is like sailing on a calm, blue sea. Minimap, Breadcrumb Navigation and Project Explorer+ are your unwavering beacons that show you the way to your files and source code, while DevSearch is the compass that will steer you right inside your IDE. How do they work exa...
Creating Your First Angular 4 App Using Angular ID... Some time ago an article Creating My First Web App with Angular 2 in Eclipse was published. Since then, Angular was upgraded and became Angular 4, and new tooling for it in Webclipse appeared. Let’s see how creating a simple application using Angular 4 and new Angular tooling looks.PrerequisitesAngular IDE or Webclipse or MyEclipse 2017+—Choose any...
Day 1 – Learning Angular + Node.js as a Java... Day 1 -- Kicking the tires...Disclaimer: I’m not an Angular guru - as the title says, this is my journey to learning Angular and Node.js, and I’ll be sharing my experiences along the way. My Java developer’s world was recently rocked -- I discovered the powers of coding with Angular (frontend) and Node.js (backend). Everybody is talking about Angu...
Coding DevStyle This Summer! The IDE world got a terrific makeover this year with the Darkest Dark theme, and now we are working on our entirely new summer collection -- DevStyle, which will include a whole gamma of beautiful summery colors, as well as a new startup experience. Just imagine being able to completely change your entire UI color scheme as you please! We had gone ...

Posted on Aug 10th 2017