Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/johnpapa/vscode-angular-snippets
Angular Snippets for VS Code
https://github.com/johnpapa/vscode-angular-snippets
angular html snippets typescript typescript-snippets vscode vscode-extension
Last synced: 3 days ago
JSON representation
Angular Snippets for VS Code
- Host: GitHub
- URL: https://github.com/johnpapa/vscode-angular-snippets
- Owner: johnpapa
- License: mit
- Created: 2015-11-13T03:56:03.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2024-07-15T19:57:40.000Z (7 months ago)
- Last Synced: 2025-01-31T17:34:19.726Z (10 days ago)
- Topics: angular, html, snippets, typescript, typescript-snippets, vscode, vscode-extension
- Language: TypeScript
- Homepage:
- Size: 7.29 MB
- Stars: 575
- Watchers: 40
- Forks: 163
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: code_of_conduct/LICENSE
Awesome Lists containing this project
- awesome-angular - VS Code Angular Snippets - This extension for Visual Studio Code adds snippets for Angular for TypeScript and HTML. (Table of contents / Angular)
- fucking-awesome-angular - VS Code Angular Snippets - This extension for Visual Studio Code adds snippets for Angular for TypeScript and HTML. (Table of contents / Angular)
- fucking-awesome-angular - VS Code Angular Snippets - This extension for Visual Studio Code adds snippets for Angular for TypeScript and HTML. (Table of contents / Angular)
README
# Angular TypeScript Snippets for VS Code
**Updated for Angular 18 release**
This extension for Visual Studio Code adds snippets for Angular for TypeScript and HTML.
See the [CHANGELOG](CHANGELOG.md) for the latest changes
## Angular Essentials
Check out the [Angular Essentials extension](https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials&WT.mc_id=javascript-0000-jopapa) for more great extensions for developing with JavaScript and Angular.
## Usage
Type part of a snippet, press `enter`, and the snippet unfolds.
Alternatively, press `Ctrl`+`Space` (Windows, Linux) or `Cmd`+`Space` (macOS) to activate snippets from within the editor.
### Command Palette Commands
| Command | Purpose |
| ---------------------------------------------------- | --------------------------- |
| express: Add simple Express server file to workspace | Adds Node.js express server |
### TypeScript Angular Snippets
| Snippet | Purpose |
| ---------------------------- | -------------------------------------------------------------------- |
| `a-component` | component |
| `a-component-standalone` | standalone component |
| `a-component-inline` | component with inline template |
| `a-component-root` | root app component |
| `a-ctor-skip-self` | angular `NgModule`'s `skipself` constructor |
| `a-directive` | directive |
| `a-guard-can-activate` | `CanActivateFn` guard |
| `a-guard-can-activate-child` | `CanActivateChildFn` guard |
| `a-guard-can-deactivate` | `CanDeactivate` guard |
| `a-guard-can-match` | `CanMatch` guard |
| `a-httpclient-get` | `httpClient.get` with Rx Observable |
| `a-http-interceptor` | Empty Angular `HttpInterceptor` for `HttpClient` |
| `a-http-interceptor-headers` | Angular `HttpInterceptor` that sets headers for `HttpClient` |
| `a-http-interceptor-logging` | Angular `HttpInterceptor` that logs traffic for `HttpClient` |
| `a-module` | module |
| `a-module-root` | root app module |
| `a-output-event` | `@Output` event and emitter |
| `a-pipe` | pipe |
| `a-preload-opt-in-strategy` | custom preload strategy that allows choosing which routes to preload |
| `a-preload-network-strategy` | custom preload strategy that preloads based on network connectivity |
| `a-resolver` | resolver |
| `a-routes` | Route definition file |
| `a-rxjs-import` | import RxJs features |
| `a-rxjs-operators` | import RxJs operators |
| `a-route-path-404` | 404 route path |
| `a-route-path-default` | default route path |
| `a-route-path-with-children` | route path with children |
| `a-route-path-eager` | eager route path |
| `a-route-path-lazy` | lazy route path |
| `a-router-events` | listen to one or more router events |
| `a-route-params-subscribe` | subscribe to route parameters |
| `a-service` | service with injectable provided in root |
| `a-service-httpclient` | service with `HttpClient` |
| `a-subscribe` | Rx Observable subscription |
| `a-trackby` | to create a trackby function in TypeScript for the `ngFor` |
### NgRx Snippets
| Snippet | Purpose |
| -------------------------------------------- | --------------------------------------------------------- |
| `a-ngrx-store-module` | create an NgRx store module |
| `a-ngrx-create-action` | create an NgRx action with `createAction` |
| `a-ngrx-create-action-props` | create an NgRx action with `createAction` with props |
| `a-ngrx-create-reducer` | create an NgRx reducer with `createReducer` |
| `a-ngrx-create-effect` | create an NgRx effect with `createEffect` |
| `a-ngrx-create-effect-api` | create an NgRx effect with `createEffect` for an API call |
| `a-ngrx-create-selector` | create an NgRx selector with `createSelector` |
| `a-ngrx-create-selector-props` | create an NgRx selector with `createSelector` with props |
| `a-ngrx-data-entity-data-module-import` | add `EntityDataModule` |
| `a-ngrx-data-entity-metadata` | create the entity metadata for NgRx |
| `a-ngrx-data-entity-collection-data-service` | create a data service using NgRx |
### Dockerfile Snippets
| Snippet | Purpose |
| --------------------------------- | -------------------------------------------- |
| `docker-angular-node-multi-stage` | Multi-stage Dockerfile for Node with Angular |
### JavaScript Snippets
| Snippet | Purpose |
| ------------------ | ---------------------- |
| `ex-simple-server` | Node.js Express Server |
### HTML Snippets
| Snippet | Purpose |
| -------------------- | --------------------------------------------------- |
| `a-class` | `[class]` binding |
| `a-select` | `` control |
| `a-style` | `[style]` binding |
| `a-ngClass` | `ngClass` |
| `a-ngFor` | `*ngFor` |
| `a-ngForAsync` | `*ngFor` with async |
| `a-ngFor-trackBy` | `*ngFor` with trackBy |
| `a-form` | create a form tag with ngSubmit and form attributes |
| `a-formArrayName` | `formArrayName` |
| `a-formControlName` | `formControlName` |
| `a-formGroup` | `formGroup` |
| `a-formGroupName` | `formGroupName` |
| `a-form-submit` | create a submit button for a form |
| `a-ngIf` | `*ngIf` |
| `a-ngIfElse` | `*ngIf` with `else` |
| `a-ngModel` | `ngModel` |
| `a-routerLink` | `routerLink` |
| `a-routerLink-param` | `routerLink` with a route parameter |
| `a-ngStyle` | `ngStyle` |
| `a-ngSwitch` | `ngSwitch` |
| `a-prej` | show the JSON form of a model |
| `a-preja` | show the JSON form of a model, using async |
| `a-ng-container` | `` element |
| `a-ng-content` | `` element |
### VS Code Snippets
| Snippet | Purpose |
| ----------------- | -------------------------------------------------------------------- |
| `a-launch-chrome` | launch/debug configuration for VS Code for Chrome |
| `a-launch-edge` | launch/debug configuration for VS Code for Edge |
| `a-task-start` | create a task configuration for starting the Angular app for VS Code |
## Installation
1. Install Visual Studio Code 1.10.0 or higher
1. Launch Code
1. From the command palette `Ctrl`-`Shift`-`P` (Windows, Linux) or `Cmd`-`Shift`-`P` (OSX)
1. Select `Install Extension`
1. Choose the extension
1. Reload Visual Studio Code
## Credits
Thanks to the following contributors for the NgRx snippets:
- [Wes Grimes](https://twitter.com/wesgrimes)
- [Tim Deschryver](https://twitter.com/tim_deschryver)