Navigate instantly from your Angular templates to any component, directive, pipe, or CSS/SCSS class with just Ctrl+Click or F12. Hover over class names to preview SCSS.
Features
Go to Component/Directive
Ctrl+Click or F12 on any Angular component (<my-component>) or directive selector (*myDirective) in your template to open the corresponding TypeScript file.
Go to Pipe
Ctrl+Click or F12 on any Angular pipe (| myPipe) to jump straight to its implementation.
Go to CSS/SCSS Class
Ctrl+Click or F12 on any class name inside a class="..." attribute to jump directly to its definition in the related SCSS file (must be named the same as the template).
Class Hover Preview
Hover over any class name in your template to instantly view the SCSS code block for that class—no click needed!
Fast & Workspace-wide
Indexes all components, directives, and pipes in your entire workspace, including monorepos and libraries.
Auto-indexing
Keeps navigation up-to-date as you add, remove, or change .ts files—no configuration needed.
Demo
How to Use
Install Angular Template Navigator from the VS Code Marketplace.
Open any Angular template file (*.html).
Ctrl+Click (Cmd+Click on Mac) or press F12 on:
A component or directive tag (<my-selector>, </my-selector>, *myDirective)
An Angular pipe in an expression (| myPipe)
A CSS class name inside a class="..." attribute
Instantly jump to the TypeScript or SCSS file where it’s defined.
Hover over a class name to preview the corresponding SCSS block.
Angular Template Navigator: Refresh Index
Available from the Command Palette.
Use to manually rebuild the navigation index if you’ve made large structural changes.
Extension Commands
No setup required — works in any Angular project, no configuration needed.
Blazing fast — uses smart indexing for instant navigation.
Works everywhere — supports monorepos, feature folders, shared libraries, and custom structures.
Full-featured — supports both opening and closing tags, multiple selectors, pipes, directives, and SCSS classes.
Developer-focused — made by Angular UI devs, for Angular UI devs.
Notes & Limitations
CSS/SCSS navigation works when the template’s related SCSS file has the same name and location (e.g., user.component.html ↔ user.component.scss).
Only classes found in the corresponding SCSS file are detected—global stylesheets are not scanned (yet).
Multiple classes in a single class="..." attribute are all supported.
License
MIT
Angular Template Navigator is not affiliated with Google or the Angular team.
Made with ❤️ for Angular developers.