DevExelt/angular-file-changer

Easily navigate between typescript, template, style, and associated test files in your Angular project using key bindings or the Mac Touch Bar. Also supports NgRx files.

Angular File Changer

Navigate between Angular component's relative files or NgRx files using your Mac Touch Bar or keyboard.

Easily navigate between a component's typescript(example.component.ts) | test(example.component.spec.ts) | template(example.component.html) | style(.scss/.sass/.less/.css) in an Angular project.

Easily navigate between an NgRx action's action(example.actions.ts) | test(.spec.ts) | effects(example.effects.ts) | reducers(example.reducer.ts).

---

Follow me on twitter for updates @john_crowson.

Usage

• Switch .ts | .html | .css | .spec.ts quickly.

  • Go to component's relative .html file

    Mac Touch Bar key titled ".html"
    Keyboard: alt+h(Windows) shift+alt+h(macOS)

  • Go to component's relative .ts file

    Mac Touch Bar key titled ".ts"
    Keyboard: alt+t(Windows) shift+alt+t(macOS)

  • Go to component's relative .spec.ts file

    Mac Touch Bar key titled ".spec"
    Keyboard: alt+s(Windows) shift+alt+s(macOS)

  • Go to component's relative .scss/.sass/.less/.css file

    Mac Touch Bar key titled ".css"
    Keyboard: alt+c(Windows) shift+alt+c(macOS)

• Switch .actions.ts | .effects.ts | .reducer.ts | .spec.ts quickly.

  • Go to NgRx component's relative .actions.ts file

    Mac Touch Bar key titled "actions"
    Keyboard: alt+a(Windows) shift+alt+a(macOS)

  • Go to NgRx component's relative .effects.ts file

    Mac Touch Bar key titled "effects"
    Keyboard: alt+e(Windows) shift+alt+e(macOS)

  • Go to NgRx component's relative .reducer.ts file

    Mac Touch Bar key titled "reducers"
    Keyboard: alt+r(Windows) shift+alt+r(macOS)

  • Go to NgRx component's relative .spec.ts file (same as for components)

    Mac Touch Bar key titled ".spec"
    Keyboard: alt+s(Windows) shift+alt+s(macOS)

Touch Bar Integration Screenshots

When viewing a component file:

When viewing an NgRx file.

Source

GitHub

Shouts Out

Inspired by angular2-switcher

Logo designed by Seth Cottle and Casey Cavanagh