component-container-toggle

🔄 Angular Component ↔ Container Navigator

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

✨ Features

⌨️ Keyboard shortcut: Alt+M – toggle between component and container

🔁 Supports multiple file types:

.ts

.html

.scss

.spec.ts

🧠 Automatically maps folders:

components/ ↔ containers/

🔎 If the target file cannot be found, or if there are multiple candidates:

opens Quick Open with the base filename (e.g. test.container) so you can pick it manually

🛠 Installation

Download and install the extension from the .vsix file or from the Marketplace (once published).

Open any Angular component or container file in VS Code.

🚀 Usage

If you are in:

src/app/components/test/test.component.ts

→ pressing Alt+M will navigate to:

src/app/containers/test/test.container.ts

Works in the other direction as well:

test.container.html → test.component.html

🧪 Examples

Input: src/app/components/user/user.component.ts Output: src/app/containers/user/user.container.ts

Input: src/app/containers/order/order.container.html Output: src/app/components/order/order.component.html

Input: test.container.ts Target file missing → opens QuickOpen with test.container

⚙️ Configuration

By default, the extension assumes the following folder structure:

components

containers

📦 Commands

Angular Tools: Toggle Component <-> Container (default keybinding: Alt+M)

📌 Requirements

VS Code ^1.90.0

An Angular project following the components/ and containers/ folder pattern

🧑‍💻 Author

Miłosz Murgrabia 🙂