VSCode Angular TypeScript & Html Snippets
Visual Studio Code TypeScript and Html snippets and code examples for Angular 2 to 17.
All code snippets are based on and follow the Angular style guide https://angular.io/docs/ts/latest/guide/style-guide.html
The source for the snippets come from:
- https://angular.io/
- https://material.angular.io/
- https://github.com/angular/flex-layout
- https://github.com/ngrx/platform
- https://github.com/ngxs
- https://jestjs.io
and most of all, none of this would exist without the help of all the contributors for fixing, enhancing, testing and making suggestions.
Snippet Prefixes
| Prefix | Description |
|---|---|
| ng- | Angular Snippets |
| fx- | Angular Flex Layout Snippets |
| ngrx- | Angular NgRx Snippets |
| ngxs- | Angular Ngxs Snippets |
| m- | Angular Material Design Snippets |
| rx- | RxJS Snippets for both TypeScript and JavaScript |
| sw- | Service Workers Snippets |
| t- | Test Snippets |
| e- | Test Expect Snippets |
| pwa- | Progressive Web Applications Snippets |
Snippet Postfix
| Postfix | Description |
|---|---|
| -cheatsheet | Cheat Sheet |
Important
This extension is optimized for developers that use Angular and are no longer using AngularJS (Angular 1). If you type in AngularJS keywords, it will suggest an Angular solutions. This is by design and meant to help developers learn how AngularJS concepts and techniques map to Angular.
See example below for ng-repeat and ng-click:
Usage
All Angular snippets starts with "ng-". Multiple snippets come in multiple variations. For instance when you want to create a new component you can choose between having the template and css inline or not:
- ng-component
- ng-component-inline
ng-component
ng-for
ng-for currently has even more variations, so make sure you pick the one you want before you press enter:
- ng-for
- ng-for-index
- ng-for-li
- ng-for-trackBy
Angular Material
All Material snippets starts with "m-" and there are now over 50 Material snippets in this package.
Pro Tip
You don't need to type any dashes: "ngrxr" -> "ng-rx-reducer" snippet
TypeScript & Html Snippets
| Snippet | Description |
|---|---|
| ng-material-module | App Material Module |
| cli-cheatsheet | Cli Cheat Sheet |
| e-atbr | ExpectAsync toBeResolved |
| e-ntb | Expect Not toBe |
| e-ntbd | Expect not toBe Defined |
| e-ntbf | Expect not toBe Falsy |
| e-ntbn | Expect Not toBeNull |
| e-ntbt | Expect not toBe Truthy |
| e-ntbu | Expect not toBe Undefined |
| e-nthbc | Expect Not toHaveBeenCalled |
| e-ntm | Expect Not toMatch |
| e-ntmr | Expect Not toMatch regex |
| e-tb | Expect toBe |
| e-tbct | Expect toBeCloseTo |
| e-tbd | Expect toBe Defined |
| e-tbf | Expect toBe Falsy |
| e-tbgt | Expect toBeGreaterThan |
| e-tbgtoe | Expect toBeGreaterThanOrEqual |
| e-tbio | Expect toBeInstanceOf |
| e-tblt | Expect toBeLessThan |
| e-tbltoe | Expect toBeLessThanOrEqual |
| e-tbn | Expect toBeNull |
| e-tbt | Expect toBe Truthy |
| e-tbu | Expect toBe Undefined |
| e-tc | Expect toContain |
| e-thbc | Expect toHaveBeenCalled |
| e-thbcw | Expect toHaveBeenCalledWith |
| e-thlrw | Expect toHaveLastReturnedWith(value) |
| e-thnrw | Expect toHaveNthReturnedWith(nthCall, value) |
| e-thp | Expect toHaveProperty |
| e-thrt | Expect toHaveReturnedTimes(2) |
| e-thrw | Expect toHaveLastReturnedWith(value) |
| e-tm | Expect toMatch |
| e-tmo | Expect toMatchObject |
| e-tmr | Expect toMatch regex |
| e-tms | Jest Expect toMatchSnapshot |
| e-tse | Expect toStrictEqual |
| fx-col | Flex Layout Column |
| fx-col-element | Flex Layout Column with Element |
| fx-col-reverse | Flex Layout Reverse Column |
| fx-import | Flex Layout Import |
| fx-item | Flex Layout Item |
| fx-item-align | Flex Layout Item with fxFlexAlign |
| fx-item-fill | Flex Layout Item with fxFlexFill |
| fx-item-offset | Flex Layout Item with fxFlexOffset |
| fx-item-order | Flex Layout Item with fxFlexOrder |
| fx-layout | Flex Layout Property |
| fx-layout-align | Flex Layout Align Property |
| fx-layout-gap | Flex Layout Gap Property |
| fx-row | Flex Layout Row |
| fx-row-reverse | Flex Layout Reverse Row |
| m-accordion | Material Accordion |
| m-button | Rectangular Material button w/ no elevation. |
| m-button-fab | Circular button w/ elevation. |
| m-button-fab-mini | Small circular button w/ elevation. |
| m-button-flat | Rectangular Material flat button. |
| m-button-icon | Circular Material button with a transparent background |
| m-button-raised | Rectangular Material button w/ elevation. |
| m-button-stroked | Rectangular Material button with a transparent background and a stroke. |
| m-button-toggle | Material toggle button |
| m-card | Material Basic Card |
| m-card-full | Material Card |
| m-checkbox | Material Checkbox |
| m-checkbox-ngmodel | Material Checkbox ngmodel |
| m-chip | Material Chip |
| m-chip-list | Material Chip List |
| m-chip-list-stacked | Material Chip Stacked List |
| m-datepicker | Material Datepicker |
| m-divider | Material Divider |
| m-divider-inset | Material Inset Divider |
| m-divider-vertical | Material Vertical Divider |
| m-drag-drop-box | Material drag drop box |
| m-expansion-panel | Material Expansion Panel |
| m-grid-list | Material Grid List |
| m-icon | Material Icon |
| m-icon-badge | Material Icon with a Badge |
| m-icon-fontawesome | Material Font Awesome Icon |
| m-icon-svg | Material SVG Icon |
| m-input | Material Input Textbox |
| m-list | Material List |
| m-list-item | Material List Item |
| m-list-ngfor | Material List ngFor |
| m-menu | Material Menu |
| m-paginator | Material Paginator |
| m-progress-bar | Material Determinate Progress Bar |
| m-progress-bar-buffer | Material Buffer Progress Bar |
| m-progress-bar-indeterminate | Material indeterminate Progress Bar |
| m-progress-bar-query | Material Query Progress Bar |
| m-radiobutton | Material Radio Button |
| m-radiobutton-option | Material Radio Button Option |
| m-select | Material Select |
| m-slide-toggle | Material Slide toggle |
| m-slider | Material Slider |
| m-slider-thumbLabel | Material Slider thumbLabel |
| m-slider-tickInterval | Material Slider tickInterval |
| m-slider-tickInterval-auto | Material Slider tickInterval Auto |
| m-slider-vertical | Material Vertical Slider |
| m-spinner | Material Determinate Spinner |
| m-spinner-indeterminate | Material Indeterminate Spinner |
| m-step | Material Vertical Stepper |
| m-stepper-horizontal | Material Horizontal Stepper |
| m-stepper-vertical | Material Vertical Stepper |
| m-tab | Material Tab |
| m-tab-group | Material Tab Group |
| m-table | Material Table |
| m-table-column | Material Table Column |
| m-table-flex | Material Table Flex |
| m-toolbar | Material toolbar |
| m-toolbar-multiRow | Material Toolbar with multiple rows |
| m-toolbar-row | Material toolbar row |
| m-tooltip | Material Tooltip |
| m-tooltip-position | Material Tooltip position |
| m-tooltip-with-position | Material Tooltip with position |
| nest-controller | Nest Controller |
| nest-dto | Nest Data Transfer Object with Swagger |
| nest-service | Nest Service |
| nest-swagger-main | Nest Add Swagger to main.ts |
| ng-afterContentChecked | Lifecycle hook: Called after every check of the component's or directive's content |
| ng-afterContentInit | Lifecycle hook: Called after ngOnInit when the component's or directive's content has been initialized |
| ng-afterViewChecked | Lifecycle hook: Called after every check of the component's view. Applies to components only |
| ng-afterViewInit | Lifecycle hook: Called after ngAfterContentInit when the component's view has been initialized |
| ng-async-validator | Angular async validator snippet |
| ng-async-validator-fn | Angular Async Validator Function" |
| ng-binding-oneway | Property: [property]=\"expression\" |
| ng-binding-twoway | Two-way data binding with the NgModel |
| ng-bootstraping | Bootstraping example |
| ng-button | A button element with a click event |
| ng-button-submit | A submit button element with a click event |
| ng-class | CSS class |
| ng-click | Click event |
| ng-component | Component with template and style urls |
| ng-component-inline | Component with inline Template and Styles |
| ng-component-value-accessor | Angular Component With NG_VALUE_ACCESSOR |
| ng-conf | The World's Original Angular Conference |
| ng-container | Angular Container |
| ng-container-component | Angular Container with *ngContainerOutlet |
| ng-container-ngfor | Angular Container with *ngFor |
| ng-container-template | Angular Container with *ngTemplateOutlet |
| ng-controller | Use component instead. |
| ng-debug | pre obj pipe json |
| ng-debug-async | pre obj pipe async pipe json |
| ng-directive | Directive template |
| ng-directive-attribute | Attribute directive |
| ng-directive-css | CSS directive |
| ng-doCheck | Lifecycle hook: Called every time that the input properties of a component or a directive are checked |
| ng-event | Event: (event) = \"onEvent()\" |
| ng-filter | For performance reasons, no comparable pipe exists in Angular 2. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe. |
| ng-for | For-loop directive |
| ng-for-index | For-loop directive with index |
| ng-for-li | For-loop directive with li element |
| ng-for-trackBy | For-loop directive with trackBy |
| ng-girls | Angular Girls |
| ng-hide | Usage: Bind to the hidden property. |
| ng-href | Usage: Bind to the href property. |
| ng-http-get | Http observable get request |
| ng-http-get-post | Http observable get & post request |
| ng-http-interceptor | Intercept an outgoing HttpRequest and optionally transform it or the response. |
| ng-httpClient-get | HttpClient observable get request |
| ng-if | If directive: *ngIf=\"expression\" |
| ng-if-else | v4: If else directive: *ngIf=\"expression; else\" |
| ng-if-then-else | v4: If then else directive: *ngIf=\"expression; then; else\" |
| ng-import | import module or component from path; |
| ng-input | Class Input Property |
| ng-interpolation | Interpolation: {{ interpolation }} |
| ng-model | ngModel directive: [(ngModel)]=\"name\" |
| ng-module | Feature Module |
| ng-module-root | App root module |
| ng-ngOnChanges | Lifecycle hook: Called before any other lifecycle hook |
| ng-onDestroy | Lifecycle hook: Called before the instance is destroyed |
| ng-onInit | Lifecycle hook: Called after the constructor |
| ng-orderBy | For performance reasons, no comparable pipe exists in Angular 2. Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe. |
| ng-output | Class Output Event |
| ng-pipe | Pipe template |
| ng-pipe-async | Async pipe - Usage: observable_or_promise_expression | async |
| ng-pipe-currency | Currency pipe - Usage: money | currency:'EUR' |
| ng-pipe-date | Date pipe - Default format: 09/15/1971 |
| ng-pipe-date-custom | Date pipe - Format: \"MM/dd/yy\" = 09/15/71 |
| ng-pipe-date-full | Full date pipe - Format: Wednesday, September 15, 1971 |
| ng-pipe-date-short | Short date pipe - Format: 09/15/1971 |
| ng-pipe-decimal | Decimal pipe - Usage: number_expression | decimal[:digitInfo] |
| ng-pipe-example | Angular pipe example |
| ng-pipe-json | Json pipe - Usage: object | json |
| ng-pipe-lowercase | Lowercase pipe |
| ng-pipe-percent | Percent pipe - Usage: number_expression | percent[:digitInfo] |
| ng-pipe-slice | Slice pipe - Usage: array_or_string_expression | slice:start[:end] |
| ng-pipe-titlecase | v4: Titlecase pipe |
| ng-pipe-uppercase | Uppercase pipe |
| ng-property | Property: [property]=\"expression\" |
| ng-repeat | Use ngFor instead. |
| ng-route-feature | Angular Route Feature |
| ng-route-guard-canactivate | CanActivate Guard Route |
| ng-route-guard-canactivatechild | CanActivateChild Route |
| ng-route-guard-candeactivate | CanDeactivate Guard Route |
| ng-route-guard-canload | CanLoad Guard Route |
| ng-route-guard-resolve | Resolve Guard Route |
| ng-route-lazy | Router link |
| ng-route-lazy-ivy | Router link |
| ng-router | Router template |
| ng-router-appmodule | Routes to include in root module |
| ng-router-attribute | Router link |
| ng-router-featuremodule | Routes to include in a feature module |
| ng-router-link | Router link |
| ng-router-linkActive | Router active link |
| ng-router-outlet | Router outlet element |
| ng-router-outlet-name | Router outlet element with name |
| ng-service | Basic service |
| ng-show | Usage: Bind to the hidden property. |
| ng-src | Usage: Bind to the src property. |
| ng-style | CSS style |
| ng-switch | Switch template |
| ng-template | Angular template |
| ng-validator | Angular validator snippet |
| ng-validator-fn | Angular Validator Function" |
| ngrx-action-const | ngRx Single action |
| ngrx-action-creator | ngRx Single action with const |
| ngrx-action-creator-enum | ngRx Single action creator for enum |
| ngrx-actions | ngRx Actions class |
| ngrx-actiontype-enum | ngRx enum action type |
| ngrx-actiontypes-enum | ngRx enum action types |
| ngrx-effect | ngRx Effect |
| ngrx-module | ngRx Root Module |
| ngrx-reducer | ngRx Reducer |
| ngrx-util | ngRx Util |
| ngxs-action | Ngxs Action |
| ngxs-action-payload | Ngxs Action with Payload |
| ngxs-select | Ngxs Select |
| ngxs-state | Ngxs State |
| ngxs-state-model | Ngxs State Model |
| ngxs-store | Ngxs Store |
| ngxs-store-import | Ngxs Import Store |
| nx-cheatsheet | Nx Cheat Sheet |
| nx-ngrx-cheatsheet | Nx Cheat Sheet |
| pwa-link-manifest | PWA Link Manifest |
| pwa-manifest | PWA Json Manifest |
| rx-import-observable | RxJS Import Observable |
| rx-import-operator | RxJS Import an Operator |
| rx-import-subject | RxJS Import Subject |
| rx-mergeMap | RxJS MergeMap Example |
| sw-register | Register Service Worker |
| sw-register-and-check | Register Service Worker and Check |
| t-afterAll | afterAll |
| t-afterEach | afterEach |
| t-beforeAll | beforeAll |
| t-beforeEach | beforeEach |
| t-component-async | Test Async Component |
| t-component-sync | Test Synchronous Component |
| t-component-sync-old | Test Synchronous Component |
| t-describe | Describe |
| t-describe-it | Describe, It & Expect |
| t-directive | Test a directive |
| t-it | It |
| t-ite | It and Expect |
| t-module | Test Module |
| t-pipe | Test a pipe |
| t-service | Test a service |
| wat | A lightning talk by Gary Bernhardt from CodeMash 2012. ng-wat talk by Shai Reznik in 2015 |
Installation (Mac)
- Launch VS Code
- Quick Open (⌘+P)
- Enter the following command and press enter: 'ext install Angular-BeastCode'
- Choose extension (Author: Mikael Morlund)
- Reload VS Code
Installation (Windows, Linux)
- Launch VS Code
- Quick Open (Ctrl-Shift-P)
- Enter the following command and press enter: 'ext install Angular-BeastCode'
- Choose extension (Author: Mikael Morlund)
- Reload VS Code
Emmets
If you want intellisense to show emmets before the snippets, you can force the emmets suggestions to show up at the top, by add the following to your editor user settings:
{
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top"
}Feedback
Please send any feedback or suggestions to @Mike_BeastCode (Twitter) or create an issue on GitHub.
Open Source
This is an open source project and if you want to contribute I've added issues on github that are easy to start with. 
Disclaimer
Important: This extension due to the nature of it's purpose will create files on your hard drive and if necessary create the respective folder structure. While it should not override any files during this process, I'm not giving any guarantees or take any responsibility in case of lost data.
License
MIT