I use VS Code a lot in my development projects and recently put together a set of Angular (v2 or higher) TypeScript and HTML snippets that can be used to enhance productivity when building Single Page Applications.  By typing the snippet prefix (which is “ag-”) in a TypeScript or HTML file you can quickly add the associated code into your file.

Here’s a list of the supported snippets:

Angular TypeScript Snippets

ag-Bootstrap                     - Bootstrap snippet
ag-AppModule                     - Create the root app module (@NgModule) snippet
ag-AppFeatureModule              - Angular app feature module (@NgModule) snippet
ag-AppFeatureRoutingModule       - Angular app feature routing module (@NgModule) snippet
ag-CanActivateRoutingGuard       - Create a CanActivate routing guard snippet
ag-CanDeactivateRoutingGuard     - Create a CanDeactivate routing guard snippet
ag-Component                     - Component snippet
ag-HttpService                   - Service with Http snippet (deprecated)
ag-HttpClientService             - Service with HttpClient snippet
ag-InputProperty                 - @Input property snippet
ag-InputGetSetProperty           - @Input property with get/set snippet
ag-OutputEvent                   - @Output event snippet
ag-Pipe                          - Pipe snippet
ag-Routes                        - Angular routes snippet
ag-Route                         - Route definition snippet
ag-Service                       - Service snippet
ag-Subscribe                     - Observable subscribe snippet

Angular HTML Template Snippets

ag-ClassBinding              - [class] binding snippet
ag-NgClass                   - [ngClass] snippet
ag-NgFor                     - *ngFor snippet
ag-NgForm                    - ngForm snippet
ag-NgIf                      - *ngIf snippet
ag-NgModel                   - [(ngModel)] binding snippet
ag-RouterLink                - Basic routerLink snippet
ag-RouterLinkWithParameter   - [routerLink] with route parameter snippet
ag-NgSwitch                  - [ngSwitch] snippet
ag-NgStyle                   - [ngStyle] snippet
ag-Select                    - select control using *ngFor snipppet
ag-StyleBinding              - [style] binding snippet

In addition to typing the snippet prefix, you can also press Ctrl+Space on Windows or Linux, or Cmd+Space on Mac to activate the snippets.

Installing the Angular TypeScript and HTML Snippets

Windows:  Select Ctrl+P and then type: ext install angular2-snippets
Mac:      Select ⌘+P and then type: ext install angular2-snippets

After restarting the editor open a TypeScript file and type the “ag-” prefix to see the snippets.

NOTE: The VS Code extension gallery doesn’t allow projects to be renamed after they are initially created so “angular2-snippets” will get you the latest version of the snippets even though “2” is in the name.

The following walk-through provides additional details.