Angular, TypeScript and HTML Snippets for VS Code

This VS Code extension adds Angular, TypeScript and HTML code snippets into your editor.

How To Use the Snippets

Type one of the snippet names below (or part of it) and then press return.

TypeScript Snippets

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-HttpClientService             - Service with HttpClient snippet
ag-InputProperty                 - @Input property snippet
ag-InputGetSet                   - @Input property with get/set
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
ag-Subscription                  - RxJS Subscription property
ag-ConcatMap                     - ConcatMap snippet used to handle multiple observables returned from a service (Http calls or others)

HTML 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.