Angular 17 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout installs statistics

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 |…

Description from the VS Code Marketplace listing.