Home

Awesome

Angular TypeScript Snippets for VS Code

Updated for Angular 18 release

This extension for Visual Studio Code adds snippets for Angular for TypeScript and HTML.

Use Extension

See the CHANGELOG for the latest changes

Angular Essentials

Check out the Angular Essentials extension for more great extensions for developing with JavaScript and Angular.

Usage

Type part of a snippet, press enter, and the snippet unfolds.

Alternatively, press Ctrl+Space (Windows, Linux) or Cmd+Space (macOS) to activate snippets from within the editor.

Command Palette Commands

CommandPurpose
express: Add simple Express server file to workspaceAdds Node.js express server

TypeScript Angular Snippets

SnippetPurpose
a-componentcomponent
a-component-standalonestandalone component
a-component-inlinecomponent with inline template
a-component-rootroot app component
a-ctor-skip-selfangular NgModule's skipself constructor
a-directivedirective
a-guard-can-activateCanActivateFn guard
a-guard-can-activate-childCanActivateChildFn guard
a-guard-can-deactivateCanDeactivate guard
a-guard-can-matchCanMatch guard
a-httpclient-gethttpClient.get with Rx Observable
a-http-interceptorEmpty Angular HttpInterceptor for HttpClient
a-http-interceptor-headersAngular HttpInterceptor that sets headers for HttpClient
a-http-interceptor-loggingAngular HttpInterceptor that logs traffic for HttpClient
a-modulemodule
a-module-rootroot app module
a-output-event@Output event and emitter
a-pipepipe
a-preload-opt-in-strategycustom preload strategy that allows choosing which routes to preload
a-preload-network-strategycustom preload strategy that preloads based on network connectivity
a-resolverresolver
a-routesRoute definition file
a-rxjs-importimport RxJs features
a-rxjs-operatorsimport RxJs operators
a-route-path-404404 route path
a-route-path-defaultdefault route path
a-route-path-with-childrenroute path with children
a-route-path-eagereager route path
a-route-path-lazylazy route path
a-router-eventslisten to one or more router events
a-route-params-subscribesubscribe to route parameters
a-serviceservice with injectable provided in root
a-service-httpclientservice with HttpClient
a-subscribeRx Observable subscription
a-trackbyto create a trackby function in TypeScript for the ngFor

NgRx Snippets

SnippetPurpose
a-ngrx-store-modulecreate an NgRx store module
a-ngrx-create-actioncreate an NgRx action with createAction
a-ngrx-create-action-propscreate an NgRx action with createAction with props
a-ngrx-create-reducercreate an NgRx reducer with createReducer
a-ngrx-create-effectcreate an NgRx effect with createEffect
a-ngrx-create-effect-apicreate an NgRx effect with createEffect for an API call
a-ngrx-create-selectorcreate an NgRx selector with createSelector
a-ngrx-create-selector-propscreate an NgRx selector with createSelector with props
a-ngrx-data-entity-data-module-importadd EntityDataModule
a-ngrx-data-entity-metadatacreate the entity metadata for NgRx
a-ngrx-data-entity-collection-data-servicecreate a data service using NgRx

Dockerfile Snippets

SnippetPurpose
docker-angular-node-multi-stageMulti-stage Dockerfile for Node with Angular

JavaScript Snippets

SnippetPurpose
ex-simple-serverNode.js Express Server

HTML Snippets

SnippetPurpose
a-class[class] binding
a-select<select> control
a-style[style] binding
a-ngClassngClass
a-ngFor*ngFor
a-ngForAsync*ngFor with async
a-ngFor-trackBy*ngFor with trackBy
a-formcreate a form tag with ngSubmit and form attributes
a-formArrayNameformArrayName
a-formControlNameformControlName
a-formGroupformGroup
a-formGroupNameformGroupName
a-form-submitcreate a submit button for a form
a-ngIf*ngIf
a-ngIfElse*ngIf with else
a-ngModelngModel
a-routerLinkrouterLink
a-routerLink-paramrouterLink with a route parameter
a-ngStylengStyle
a-ngSwitchngSwitch
a-prejshow the JSON form of a model
a-prejashow the JSON form of a model, using async
a-ng-container<ng-container> element
a-ng-content<ng-content> element

VS Code Snippets

SnippetPurpose
a-launch-chromelaunch/debug configuration for VS Code for Chrome
a-launch-edgelaunch/debug configuration for VS Code for Edge
a-task-startcreate a task configuration for starting the Angular app for VS Code

Installation

  1. Install Visual Studio Code 1.10.0 or higher
  2. Launch Code
  3. From the command palette Ctrl-Shift-P (Windows, Linux) or Cmd-Shift-P (OSX)
  4. Select Install Extension
  5. Choose the extension
  6. Reload Visual Studio Code

Credits

Thanks to the following contributors for the NgRx snippets: