Angular (2 or higher), TypeScript and HTML Snippets for VS Code 6


I use VS Code a lot in my development projects and recently put together a set of Angular 2 TypeScript and HTML snippets that can be used to enhance productivity when building Single Page Applications.  By typing a snippet prefix (such as “a2”) 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 2 TypeScript Snippets

 


a2bootstrap       - Bootstrap snippet
a2appModule       - Create the root app module (@NgModule)
a2component       - Component snippet
a2httpImport      - Http module import snippet
a2httpMap         - Http map() snippet
a2inputProperty   - @Input property snippet
a2outputEvent     - @Output event snippet
a2pipe            - Pipe snippet
a2routes          - Angular 2 routes snippet
a2route           - Route definition snippet
a2service         - Service snippet
a2subscribe       - Observable subscribe snippet

 

Angular 2 HTML Template Snippets

 


a2classBinding              - [class] binding snippet
a2ngClass                   - [ngClass] snippet
a2ngFor                     - *ngFor snippet
a2ngForm                    - ngForm snippet
a2ngIf                      - *ngIf snippet
a2ngModel                   - [(ngModel)] binding snippet
a2routerLink                - basic [routerLink] snippet
a2routerLinkWithParameter   - [routerLink] with router parameter snippet
a2ngSwitch                  - [ngSwitch] snippet
a2ngStyle                   - [ngStyle] snippet
a2select                    - HTML select control using *ngFor snipppet
a2styleBinding              - [style] binding snippet

 

Installing the Angular 2 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 a2 prefix to see the snippets.

The following walk-through provides additional details.

  • Hello Dan, Just to confirm, you prefer VS Code then, over Web Storm or Atom? I’m thinking which one to use.

    • I like all of those actually but tend to use VS Code the most now days.

    • I_browse_with_Lynx

      I’m not Dan, but I like Vim. You can download Vim IDE, too, if you want a full IDE.

  • bluemountain57

    nice snippets Dan thank you saves typing boring boiler plate code

  • Deepak Rai

    Hey Dan, Is it possible to have a quick video tutorial on angular 2. Something like this : angularjs in 60ish minutes (https://www.youtube.com/watch?v=i9MHigUZKEM)
    It’s really very easy to learn from your tutorials.

  • https://www.youtube.com/watch?v=e3djIqAGqZo
    Typescript: Angular 2’s Secret Weapon – Dan Wahlin