Angular Service Injector

Quickly inject Angular services with automatic imports

Features

• Quick Search - Instantly search through all services in your workspace
• Auto Import - Automatically adds the service import statement
• inject() Ready - Uses Angular's modern inject() function
• Smart Detection - Works in components, services, directives, pipes, guards, and more
• Respects Your Style - Detects and uses your file's indentation (spaces or tabs)

Usage

1. Open any Angular injectable file (.component.ts, .service.ts, .directive.ts, etc.)
2. Press Cmd+Shift+I (Mac) or Ctrl+Shift+I (Windows/Linux)
3. Search for a service and select it
4. Done! The service is injected with all imports handled automatically

Command Palette

You can also use the Command Palette:

1. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
2. Type "Inject Angular Service"
3. Select the command and pick your service

Demo

Before:

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: ''
})
export class ExampleComponent {
}

After injecting UserService:

import { Component, inject } from '@angular/core';
import { UserService } from './services/user.service';

@Component({
  selector: 'app-example',
  template: ''
})
export class ExampleComponent {
  private readonly userService = inject(UserService);
}

Supported File Types

Keyboard Shortcuts

Requirements

• VS Code 1.106.0 or higher
• An Angular project with services (.service.ts files)

Known Issues

None at the moment. Report an issue

Release Notes

1.0.0

Initial release:

• Search and inject Angular services
• Automatic import statement generation
• Automatic inject function import from @angular/core
• Support for multiple Angular file types
• Indentation detection

License

MIT © Sebastian Ciofu

Enjoy! 🎉