Angular Snippets
A Visual Studio Code extension that provides useful snippets for Angular development.
⚠️ Disclaimer ⚠️
This is NOT an official Angular extension. It is a community-developed tool designed to enhance the Angular development experience in VS Code.
Documentation & Resources
Features
This extension provides snippets for both TypeScript and HTML files in Angular projects. Each snippet includes tab stops for easy navigation and placeholders for quick editing. The tab stops are numbered ($1, $2, etc.) and the final cursor position is marked with $0. Placeholders with the same number (e.g., ${1:name}) are connected and will be updated simultaneously.
TypeScript Snippets
Components and Core Features
ng-component - Angular 19 standalone component
- Tab Stops: $1 (selector/name), $2 (content), $0 (final position)
ng-service - Angular 19 service
- Tab Stops: $1 (service name), $0 (final position)
ng-pipe - Angular 19 standalone pipe
- Tab Stops: $1 (pipe name), $2 (value type), $3 (args type), $4 (return type), $0 (final position)
ng-directive - Angular 19 standalone directive
- Tab Stops: $1 (directive name), $0 (final position)
ng-module - Angular Module
- Tab Stops: $1 (components/name), $2 (imports), $3 (exports), $0 (final position)
ng-http - Angular HTTP Client Service
- Tab Stops: $1 (service name), $2 (API URL), $3 (resource name), $4 (type), $5 (endpoint), $0 (final position)
Decorators and Properties
ng-required-input - Angular required input property
- Tab Stops: $1 (property name), $2 (type), $0 (final position)
ng-view-child - Angular view child decorator
- Tab Stops: $1 (selector), $2 (property name), $3 (type), $0 (final position)
ng-content-child - Angular content child decorator
- Tab Stops: $1 (selector), $2 (property name), $3 (type), $0 (final position)
Signals and Effects
ng-signal - Angular 19 signal
- Tab Stops: $1 (signal name), $2 (type), $3 (initial value), $0 (final position)
ng-effect - Angular 19 effect
- Tab Stops: $1 (effect body), $0 (final position)
ng-computed - Angular 19 computed signal
- Tab Stops: $1 (computed name), $2 (computation), $0 (final position)
Legacy Versions (Angular 18)
ng18-component - Angular 18 component
- Tab Stops: $1 (selector), $2 (name), $3 (component name), $0 (final position)
ng18-service - Angular 18 service
- Tab Stops: $1 (service name), $0 (final position)
ng18-pipe - Angular 18 pipe
- Tab Stops: $1 (pipe name), $2 (pipe class name), $0 (final position)
ng18-directive - Angular 18 directive
- Tab Stops: $1 (selector), $2 (directive name), $0 (final position)
Legacy Versions (Angular 17)
ng17-component - Angular 17 component
- Tab Stops: $1 (selector), $2 (name), $3 (component name), $0 (final position)
HTML Template Snippets
Control Flow
ng-if - Angular 19 if statement
- Tab Stops: $1 (condition), $2 (content), $0 (final position)
ng-if-else - Angular 19 if-else statement
- Tab Stops: $1 (condition), $2 (true content), $3 (false content), $0 (final position)
ng-for - Angular 19 for loop
- Tab Stops: $1 (item), $2 (items), $3 (id), $4 (content), $0 (final position)
ng-for-empty - Angular 19 for loop with empty state
- Tab Stops: $1 (item), $2 (items), $3 (id), $4 (content), $5 (empty content), $0 (final position)
ng-switch - Angular 19 switch statement
- Tab Stops: $1 (expression), $2 (value), $3 (case content), $4 (default content), $0 (final position)
ng-switch-cases - Angular 19 switch statement with multiple cases
- Tab Stops: $1 (expression), $2 (value1), $3 (case1 content), $4 (value2), $5 (case2 content), $6 (default content), $0 (final position)
Data Binding
ng-event - Angular 19 event binding
- Tab Stops: $1 (event), $2 (handler), $3 (event parameter), $0 (final position)
ng-prop - Angular 19 property binding
- Tab Stops: $1 (property), $2 (expression), $0 (final position)
ng-model - Angular 19 two-way binding
- Tab Stops: $1 (property), $0 (final position)
ng-ref - Angular 19 template reference
- Tab Stops: $1 (ref name), $0 (final position)
Template Features
ng-struct - Angular 19 structural directive
- Tab Stops: $1 (directive), $2 (expression), $3 (content), $0 (final position)
ng-expr - Angular 19 template expression
- Tab Stops: $1 (expression), $0 (final position)
ng-async - Angular 19 async pipe
- Tab Stops: $1 (observable), $0 (final position)
ng-pipe-custom - Angular 19 custom pipe
- Tab Stops: $1 (value), $2 (pipe name), $3 (args), $0 (final position)
ng-defer - Angular 19 defer loading syntax
- Tab Stops: $1 (content), $2 (loading content), $3 (error content), $0 (final position)
ng-signal-template - Angular 19 signal usage in template
- Tab Stops: $1 (signal), $0 (final position)
Legacy Versions (Angular 18)
ng18-if - Angular 18 ngIf directive
- Tab Stops: $1 (condition), $2 (content), $0 (final position)
ng18-for - Angular 18 ngFor directive
- Tab Stops: $1 (item), $2 (items), $3 (content), $0 (final position)
ng18-switch - Angular 18 ngSwitch directive
- Tab Stops: $1 (condition), $2 (case1), $3 (case1 content), $4 (case2), $5 (case2 content), $6 (default content), $0 (final position)
ng18-event - Angular 18 event binding
- Tab Stops: $1 (event), $2 (method name), $3 (event parameter), $4 (button text), $0 (final position)
ng18-prop - Angular 18 property binding
- Tab Stops: $1 (property), $2 (value), $3 (content), $0 (final position)
ng18-model - Angular 18 two-way binding
- Tab Stops: $1 (property), $2 (attributes), $0 (final position)
ng18-form - Angular 18 reactive form
- Tab Stops: $1 (form group), $2 (submit handler), $3 (form content), $4 (submit text), $0 (final position)
ng18-form-control - Angular 18 form control
- Tab Stops: $1 (field name), $2 (label), $3 (input type), $4 (attributes), $0 (final position)
Legacy Versions (Angular 17)
ng17-if - Angular 17 ngIf directive
- Tab Stops: $1 (condition), $2 (content), $0 (final position)
ng17-for - Angular 17 ngFor directive
- Tab Stops: $1 (item), $2 (items), $3 (content), $0 (final position)
ng17-switch - Angular 17 ngSwitch directive
- Tab Stops: $1 (condition), $2 (case1), $3 (case1 content), $4 (case2), $5 (case2 content), $6 (default content), $0 (final position)
Usage
- Install the extension
- Open a TypeScript or HTML file in your Angular project
- Type the snippet prefix (e.g.,
ng-component) and press Tab or Enter
- Fill in the placeholders using Tab to navigate between them
Tab Stops and Placeholders
The snippets use the following conventions for better code completion:
$1, $2, etc. - Tab stops that define the order of cursor movement$0 - Final cursor position after completing the snippet${1:label} - Placeholder with a default value (e.g., ${1:ComponentName})- Connected placeholders - Same ID (e.g.,
${1:name}) in multiple places will be updated simultaneously
Example:
@Component({
selector: '${1:app-component}', // First tab stop with default value
template: `
${2:content} // Second tab stop
`
})
export class ${1:ComponentName} { // Connected to first placeholder
${0} // Final cursor position
}
Requirements
- Visual Studio Code 1.60.0 or higher
- Angular project
Extension Settings
This extension contributes the following settings:
- No additional settings required
Known Issues
None at the moment.
Release Notes
0.0.1
Initial release of Angular Snippets
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Acknowledgments
- Thanks to the Angular team for their excellent framework and documentation
- Inspired by various Angular development tools and extensions in the VS Code marketplace
- Special thanks to the VS Code team for providing such a great extension development platform
