Open an Angular component's .ts, .html, and style file side by side in a single action — no more hunting through the file tree to line up a component's template, logic, and styles.
Features
One command opens the whole component. Run Angular Trio: Open Component Files (or press Ctrl+Alt+A / Cmd+Alt+A) while any component file is focused, and its siblings open across three editor columns:
Column 1 — *.ts
Column 2 — *.html
Column 3 — the style file (.scss, .css, .sass, or .less, whichever exists)
Optional auto-open. Enable angularTrio.openOnFileOpen to lay out the trio automatically whenever you open any component file.
Only fires on real components. A file is treated as a component only when a matching .tsand.html pair exists next to it, so plain TypeScript or HTML files are left alone.
Non-intrusive focus. Files open with focus preserved, so your cursor stays where you put it.
Usage
Open any file of an Angular component (for example user-card.component.ts).
Trigger Angular Trio: Open Component Files from the Command Palette, or press Ctrl+Alt+A (Cmd+Alt+A on macOS).
The .ts, .html, and style files open side by side.
Prefer it to happen automatically? Turn on the setting below.
Extension Settings
Setting
Default
Description
angularTrio.openOnFileOpen
false
Automatically open the full component trio side by side whenever you open any one of its files.
Keyboard Shortcut
Command
Windows / Linux
macOS
Open Component Files
Ctrl+Alt+A
Cmd+Alt+A
You can remap this in Preferences → Keyboard Shortcuts by searching for "Angular Trio".
Requirements
No dependencies. Works with any project whose components follow the standard Angular layout of co-located .ts / .html / style files.
Known Issues
Components that split a template or styles across non-standard file names are not detected — only .html templates and .scss / .css / .sass / .less styles that share the component's base name are opened.
