Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Angular Template NavigatorNew to Visual Studio Code? Get it now.
Angular Template Navigator

Angular Template Navigator

Lahsiv

|
35 installs
| (8) | Free
Navigate from any Angular template to the corresponding component, directive, pipe, or CSS—fast and easy.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Angular Template Navigator

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

Demo


How to Use

  1. Install Angular Template Navigator from the VS Code Marketplace.
  2. Open any Angular template file (*.html).
  3. 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
  4. Instantly jump to the TypeScript or SCSS file where it’s defined.
  5. Hover over a class name to preview the corresponding SCSS block.

Example

<!-- Component navigation -->
<app-user-profile></app-user-profile>

<!-- Directive navigation -->
<button *myHighlight>Highlight Me</button>

<!-- Pipe navigation -->
{{ user.name | capitalize }}

<!-- CSS class navigation and hover -->
<div class="user-card selected"></div>

Keyboard Shortcut

  • Refresh Index:
Shift+Alt+I

(Can also be accessed from the Command Palette)

Extension Commands

  • 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

  1. No setup required — works in any Angular project, no configuration needed.

  2. Blazing fast — uses smart indexing for instant navigation.

  3. Works everywhere — supports monorepos, feature folders, shared libraries, and custom structures.

  4. Full-featured — supports both opening and closing tags, multiple selectors, pipes, directives, and SCSS classes.

  5. Developer-focused — made by Angular UI devs, for Angular UI devs.

Notes & Limitations

  1. 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).

  2. Only classes found in the corresponding SCSS file are detected—global stylesheets are not scanned (yet).

  3. 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.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft