🔄 Angular Component ↔ Container Navigator

A VS Code extension that allows you to quickly toggle between Angular Components and Containers.
Use a keyboard shortcut or run the command from the palette – the extension will automatically navigate to or search for the corresponding file.

✨ Features

• ⌨️ Keyboard shortcuts:
  • Alt+M → toggle between component and container
  • Alt+N → always search in QuickOpen with the target filename
• 🔁 Supports multiple file types: .ts, .html, .scss, .spec.ts
• 🧠 Automatically maps between component and container filenames
• 🔎 Smart search:
  • Searches recursively in the parent folder above components/
  • If exactly one match is found → opens it directly (Alt+M only)
  • If multiple or none → falls back to QuickOpen with the base filename

🛠 Installation

1. Download and install the extension from the .vsix file or from the Marketplace (once published).
2. Open any Angular component or container file in VS Code.

🚀 Usage

Examples

• Input:
  src/app/features/components/test/test.component.ts
  Alt+M →
  src/app/features/containers/test/test.container.ts

• Input:
  src/app/features/components/order/order.component.html
  Alt+M →
  src/app/features/other/containers/deep/order.container.html (found recursively)

• Input:
  test.container.ts
  Alt+N →
  opens QuickOpen with test.component

⚙️ Configuration

• Default assumptions:
  • components/ folder exists in the project
  • Target files (container) are searched recursively in the parent folder of components/
• Planned:
  • configurable folder names and search scope

📦 Commands

• Angular Tools: Toggle Component <-> Container
  • Default keybinding: Alt+M
• Angular Tools: Search Component <-> Container
  • Default keybinding: Alt+N

📌 Requirements

• VS Code >= 1.90.0
• Angular project using the components/ and containers/ naming pattern

🧑‍💻 Author

Miłosz Murgrabia