Angular Mode enhances your workflow by providing an interactive API for Angular CLI commands and allows you to quickly open schematic files such as components, services, and more through a dedicated keymap. Additionally, you can conveniently jump between corresponding component files, such as templates, components, tests, and stylesheets.

Note: At the moment, Angular Mode only supports the generate commands.

To utilize this package, activate angular-mode to access the keybinding for generating schematics within your Angular project. Additionally, you can use M-x angular-generate to generate schematics.

Using the C-c a g command, you can perform the following:

• Choose a schematic from the list.
• Specify a name for the selected schematic.
• Pick a destination directory for the scaffolded file(s).

Angular Mode offers convenient shortcuts to quickly open files for various Angular scaffolded files by using the C-c a o prefix. This will provide a filtered list of files based on the schematic type. See the list of corresponding keybindings.

Examples:

• Component: Open a component.ts file - C-c a o c
• Service: Open a service.ts file - C-c a o s
• Module: Open a module.ts file - C-c a o m

Angular Mode provides an easy way to help you jump between associated Angular files with ease. Whether you're working with components, services, resolvers, etc., you can quickly switch between the following file types:

• Template: Jump to the associated .html file - C-c a j t
• Component: Jump to the associated .ts file - C-c a j c
• Test: Jump to the associated .spec.ts file - C-c a j x
• Stylesheet: Jump to the associated .scss, .less, .sass, or .css file - C-c a j v

Tired of manually updating import paths when moving files around and wasting a bunch of time? Me too!

Now you can do it in seconds by using M-x angular-move-directory (C-c a m d) to move an entire directory of angular files or M-x angular-move-file (C-c a m f) to move a specific file (and associated spec file if it exists) to the destination of your choosing.

Upon move, every import path that references the moved files will automatically update to the new path. If you have a preference on using relative vs. absolute, you can customize angular-import-path-style (defaults to relative) by using the customize interface or by adding this to your config:

(setopt angular-import-path-style 'absolute)

Tips: Use angular-move-directory if you want to move a component, module, or anything that may have multiple associated files and are contained in a directory.

Use angular-move-file if you want to move a service, resolver, or anything that is a scaffolded file + an associated .spec.ts file (if it exists).

Disclaimers:

• The move functions may change a large amount of files. Make sure you have a backup or have version control in place in case you need to revert.
• The move functions do not support custom modules. This means any import path that references a custom module will not be updated.
• If you move files from one module to another, you'll need to manually update those imports if you no longer want the original module importing those files.

Angular Mode supports navigating to the definition of Angular components directly from template files by using M-. (xref-find-definitions).

You can install angular-mode manually or via a package manager.

1. Clone or download this repository to your local machine.

   git clone https://github.com/kborling/angular-mode.git

2. Add the following to your Emacs configuration file:

   (add-to-list 'load-path "/path/to/angular-mode")
   (require 'angular-mode)

You can install angular-mode using popular package managers such as Straight and Elpaca. Choose the method that suits your preference:

(straight-use-package
  '(angular-mode :type git :host github :repo "kborling/angular-mode"))
;; Using the use-package integration
(use-package angular-mode
  :straight (angular-mode :host github :repo "kborling/angular-mode" :files ("*.el")))

(use-package angular-mode
  :ensure (angular-mode :host github :repo "kborling/angular-mode" :files ("*.el")))

(package! angular-mode
  :recipe (:host github :repo "kborling/angular-mode"))

(angular-mode :location (recipe :fetcher github :repo "kborling/angular-mode"))

angular-mode assumes the Angular CLI tool is installed globally. If that's not the case, set the angular-cli-executable:

(setq angular-cli-executable "/path/to/ng/command")

To activate angular-mode globally, add the following:

(global-angular-mode 1)

To activate angular-mode automatically for a specific project, follow these steps:

1. In your project root directory, create a .dir-locals.el file if it doesn't already exist.

2. Open the .dir-locals.el file and add the following:

((nil . ((mode . angular))))

3. Save the .dir-locals.el file.

This will automatically activate angular-mode when visiting any file within the project.