Angular 19 Snippets

A Visual Studio Code extension that provides comprehensive code snippets for Angular 19 development, making it faster and easier to write Angular code.

⚠️ Disclaimer ⚠️

This extension is not the official Angular extension and is not affiliated with, endorsed by, or connected to Google or the Angular team in any way. It is a community-created tool designed to enhance your Angular development experience.

Features

This extension provides snippets for:

TypeScript Snippets

Components

• ng-component - Create a standalone component with basic structure
• ng-component-with-input - Create a component with input decorator
• ng-component-with-output - Create a component with output decorator
• ng-component-with-viewchild - Create a component with ViewChild decorator
• ng-component-with-contentchild - Create a component with ContentChild decorator

Services

• ng-service - Create a basic service
• ng-service-with-http - Create a service with HTTP client
• ng-service-with-http-interceptor - Create a service with HTTP interceptor
• ng-service-with-http-guard - Create a service with route guard

Pipes

• ng-pipe - Create a standalone pipe
• ng-pipe-with-args - Create a pipe with arguments
• ng-pipe-with-pure - Create a pure pipe
• ng-pipe-with-impure - Create an impure pipe

Directives

• ng-directive - Create a standalone directive
• ng-directive-with-host - Create a directive with host listener
• ng-directive-with-hostbinding - Create a directive with host binding
• ng-directive-with-input - Create a directive with input

Signals and Effects

• ng-signal - Create a signal
• ng-signal-with-computed - Create a computed signal
• ng-effect - Create an effect
• ng-effect-with-cleanup - Create an effect with cleanup

Common Imports

• ng-imports - Common Angular imports
• ng-imports-forms - Form-related imports
• ng-imports-router - Router-related imports
• ng-imports-http - HTTP-related imports

Constructors

• ng-constructor - Basic constructor
• ng-constructor-di - Constructor with dependency injection
• ng-constructor-with-http - Constructor with HTTP client
• ng-constructor-with-router - Constructor with router

Lifecycle Hooks

• ng-lifecycle - Common lifecycle hooks
• ng-oninit - OnInit lifecycle hook
• ng-ondestroy - OnDestroy lifecycle hook
• ng-afterviewinit - AfterViewInit lifecycle hook
• ng-aftercontentinit - AfterContentInit lifecycle hook

API Services

• ng-api-service - Complete API service
• ng-api-call - API call with loading state
• ng-api-pagination - API call with pagination
• ng-api-search - API call with search
• ng-api-error-handling - API call with error handling

Form Handling

• ng-form-control - Form control
• ng-form-group - Form group
• ng-form-array - Form array
• ng-form-builder - Form builder
• ng-form-validation - Form validation
• ng-form-submit - Form submit handler

Route Guards and Resolvers

• ng-guard - Route guard
• ng-resolver - Route resolver
• ng-can-activate - CanActivate guard
• ng-can-deactivate - CanDeactivate guard
• ng-resolve - Resolve guard

Error Handling

• ng-error-handler - Error handler
• ng-error-interceptor - Error interceptor
• ng-error-boundary - Error boundary
• ng-error-logging - Error logging service

Custom Validators

• ng-validator - Custom form validator
• ng-validator-async - Async form validator
• ng-validator-cross-field - Cross-field validator
• ng-validator-pattern - Pattern validator

HTML Snippets

Template Syntax

• ng-if - If statement
• ng-for - For loop
• ng-switch - Switch statement
• ng-ng-container - NgContainer element
• ng-ng-template - NgTemplate element

Structural Directives

• ng-structural-if - Structural if directive
• ng-structural-for - Structural for directive
• ng-structural-switch - Structural switch directive
• ng-structural-ng-container - Structural ng-container

Event and Property Bindings

• ng-event - Event binding
• ng-prop - Property binding
• ng-model - Two-way binding
• ng-ref - Template reference
• ng-attr - Attribute binding

Forms

• ng-form - Reactive form
• ng-form-control - Form control with validation
• ng-form-group - Form group
• ng-form-array - Form array
• ng-form-submit - Form submit button

Router Links

• ng-router-link - Router link
• ng-router-outlet - Router outlet
• ng-router-link-active - Router link active
• ng-router-link-exact - Router link exact

Loading States

• ng-loading - Loading spinner
• ng-loading-overlay - Loading overlay
• ng-loading-skeleton - Loading skeleton
• ng-loading-progress - Loading progress bar

Error Messages

• ng-error - Error message
• ng-error-boundary - Error boundary
• ng-error-toast - Error toast
• ng-error-alert - Error alert

Success Messages

• ng-success - Success message
• ng-success-toast - Success toast
• ng-success-alert - Success alert
• ng-success-banner - Success banner

Pagination

• ng-pagination - Pagination controls
• ng-pagination-simple - Simple pagination
• ng-pagination-advanced - Advanced pagination
• ng-pagination-infinite - Infinite scroll

Search Functionality

• ng-search - Search input
• ng-search-debounce - Debounced search
• ng-search-autocomplete - Search autocomplete
• ng-search-filter - Search filter

Modal Dialogs

• ng-modal - Modal dialog
• ng-modal-confirm - Confirmation modal
• ng-modal-form - Form modal
• ng-modal-custom - Custom modal

Snippet Placeholders and Tab Stops

All snippets in this extension use VS Code's tab stop and placeholder conventions for a smoother coding experience:

• $1, $2, ...: Tab stops for quick navigation between fields.
• ${1:label}: Placeholders with default values. Placeholders with the same id are connected—editing one updates all.
• $0: Final cursor position after snippet expansion.

This makes it easy to fill out all required fields in a snippet using the Tab key.

Important Links

• Angular Official Website: https://angular.io/
• Angular Documentation: https://angular.io/docs
• Angular GitHub Repository: https://github.com/angular/angular

Installation

1. Open VS Code
2. Press Ctrl+P (Windows/Linux) or Cmd+P (Mac)
3. Type ext install angular-19-snippets
4. Press Enter

Usage

Type the prefix and press Tab to insert the snippet.

Requirements

• Visual Studio Code 1.85.0 or higher
• Angular 19 project

Extension Settings

This extension contributes the following settings:

• angular19snippets.enable: Enable/disable the extension
• angular19snippets.prefix: Customize the prefix for snippets (default: 'ng-')

Known Issues

• None at the moment

Release Notes

See CHANGELOG.md for release notes.

Contributing

See CONTRIBUTING.md for contribution guidelines.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have suggestions, please:

1. Check the known issues
2. Open an issue on GitHub
3. Contact the maintainers

Acknowledgments

• Angular team for the amazing framework
• VS Code team for the excellent extension API
• All contributors who have helped improve this extension