Angular 4 TypeScript and HTML Snippets for VS Code 9


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)
ag-AppFeatureModule              - Angular app feature module (@NgModule) snippet
ag-AppFeatureRoutingModule       - Angular app feature routing module (@NgModule) snippet
ag-CanDeactivateRoutingGuard     - Create a CanDeactivate routing guard
ag-Component                     - Component snippet
ag-HttpImport                    - Http module import snippet
ag-HttpMap                       - Http map() snippet
ag-HttpService                   - Service with Http snippet
ag-InputProperty                 - @Input property 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.

  • 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

    • Thanks! Glad to hear they’re helpful.

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

    • Plan to do that – just need my travel schedule to settle down so I have the time. 🙂

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

  • Robert Werner

    Dan, I used VSCode a lot in Windows 10. Now that I’m using a Mac, I initially tried using it to develop an app that uses Angular 2, TypeScript, and SASS. The huge stumbling block was that the EasySASS compiler doesn’t know how to handle paths that involve the tilde character. As such, one can not create SCSS or SASS files and have them compiled into CSS. Just wondering if you encountered the same and, if so, how you got around it?