{"id":13406838,"url":"https://github.com/johnpapa/vscode-angular-snippets","last_synced_at":"2025-05-15T05:07:08.149Z","repository":{"id":2377617,"uuid":"46098830","full_name":"johnpapa/vscode-angular-snippets","owner":"johnpapa","description":"Angular Snippets for VS Code","archived":false,"fork":false,"pushed_at":"2025-04-09T13:14:50.000Z","size":7733,"stargazers_count":575,"open_issues_count":11,"forks_count":163,"subscribers_count":39,"default_branch":"main","last_synced_at":"2025-04-12T16:52:31.737Z","etag":null,"topics":["angular","html","snippets","typescript","typescript-snippets","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johnpapa.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"code_of_conduct/LICENSE","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["johnpapa"]}},"created_at":"2015-11-13T03:56:03.000Z","updated_at":"2025-03-27T18:53:09.000Z","dependencies_parsed_at":"2022-09-15T22:30:14.545Z","dependency_job_id":"f0f976e7-a63e-4356-9dbe-e36b75c0df42","html_url":"https://github.com/johnpapa/vscode-angular-snippets","commit_stats":{"total_commits":234,"total_committers":35,"mean_commits":6.685714285714286,"dds":0.4572649572649573,"last_synced_commit":"7ca4617847f6661b1dc6317ddbc814ce40df8fa6"},"previous_names":["johnpapa/vscode-angular2-snippets"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnpapa%2Fvscode-angular-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnpapa%2Fvscode-angular-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnpapa%2Fvscode-angular-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnpapa%2Fvscode-angular-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johnpapa","download_url":"https://codeload.github.com/johnpapa/vscode-angular-snippets/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254276447,"owners_count":22043867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","html","snippets","typescript","typescript-snippets","vscode","vscode-extension"],"created_at":"2024-07-30T19:02:40.645Z","updated_at":"2025-05-15T05:07:03.129Z","avatar_url":"https://github.com/johnpapa.png","language":"TypeScript","readme":"# Angular TypeScript Snippets for VS Code\n\n**Updated for Angular 18 release**\n\nThis extension for Visual Studio Code adds snippets for Angular for TypeScript and HTML.\n\n![Use Extension](images/use-extension.gif)\n\nSee the [CHANGELOG](CHANGELOG.md) for the latest changes\n\n## Angular Essentials\n\nCheck out the [Angular Essentials extension](https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials\u0026WT.mc_id=javascript-0000-jopapa) for more great extensions for developing with JavaScript and Angular.\n\n## Usage\n\nType part of a snippet, press `enter`, and the snippet unfolds.\n\nAlternatively, press `Ctrl`+`Space` (Windows, Linux) or `Cmd`+`Space` (macOS) to activate snippets from within the editor.\n\n### Command Palette Commands\n\n| Command                                              | Purpose                     |\n| ---------------------------------------------------- | --------------------------- |\n| express: Add simple Express server file to workspace | Adds Node.js express server |\n\n### TypeScript Angular Snippets\n\n| Snippet                      | Purpose                                                              |\n| ---------------------------- | -------------------------------------------------------------------- |\n| `a-component`                | component                                                            |\n| `a-component-standalone`     | standalone component                                                 |\n| `a-component-inline`         | component with inline template                                       |\n| `a-component-root`           | root app component                                                   |\n| `a-ctor-skip-self`           | angular `NgModule`'s `skipself` constructor                          |\n| `a-directive`                | directive                                                            |\n| `a-guard-can-activate`       | `CanActivateFn` guard                                                |\n| `a-guard-can-activate-child` | `CanActivateChildFn` guard                                             |\n| `a-guard-can-deactivate`     | `CanDeactivate` guard                                                |\n| `a-guard-can-match`          | `CanMatch` guard                                                     |\n| `a-httpclient-get`           | `httpClient.get` with Rx Observable                                  |\n| `a-http-interceptor`         | Empty Angular `HttpInterceptor` for `HttpClient`                     |\n| `a-http-interceptor-headers` | Angular `HttpInterceptor` that sets headers for `HttpClient`         |\n| `a-http-interceptor-logging` | Angular `HttpInterceptor` that logs traffic for `HttpClient`         |\n| `a-module`                   | module                                                               |\n| `a-module-root`              | root app module                                                      |\n| `a-output-event`             | `@Output` event and emitter                                          |\n| `a-pipe`                     | pipe                                                                 |\n| `a-preload-opt-in-strategy`  | custom preload strategy that allows choosing which routes to preload |\n| `a-preload-network-strategy` | custom preload strategy that preloads based on network connectivity  |\n| `a-resolver`                 | resolver                                                             |\n| `a-routes`                   | Route definition file                                                |\n| `a-rxjs-import`              | import RxJs features                                                 |\n| `a-rxjs-operators`           | import RxJs operators                                                |\n| `a-route-path-404`           | 404 route path                                                       |\n| `a-route-path-default`       | default route path                                                   |\n| `a-route-path-with-children` | route path with children                                             |\n| `a-route-path-eager`         | eager route path                                                     |\n| `a-route-path-lazy`          | lazy route path                                                      |\n| `a-router-events`            | listen to one or more router events                                  |\n| `a-route-params-subscribe`   | subscribe to route parameters                                        |\n| `a-service`                  | service with injectable provided in root                             |\n| `a-service-httpclient`       | service with `HttpClient`                                            |\n| `a-subscribe`                | Rx Observable subscription                                           |\n| `a-trackby`                  | to create a trackby function in TypeScript for the `ngFor`           |\n\n### NgRx Snippets\n\n| Snippet                                      | Purpose                                                   |\n| -------------------------------------------- | --------------------------------------------------------- |\n| `a-ngrx-store-module`                        | create an NgRx store module                               |\n| `a-ngrx-create-action`                       | create an NgRx action with `createAction`                 |\n| `a-ngrx-create-action-props`                 | create an NgRx action with `createAction` with props      |\n| `a-ngrx-create-reducer`                      | create an NgRx reducer with `createReducer`               |\n| `a-ngrx-create-effect`                       | create an NgRx effect with `createEffect`                 |\n| `a-ngrx-create-effect-api`                   | create an NgRx effect with `createEffect` for an API call |\n| `a-ngrx-create-selector`                     | create an NgRx selector with `createSelector`             |\n| `a-ngrx-create-selector-props`               | create an NgRx selector with `createSelector` with props  |\n| `a-ngrx-data-entity-data-module-import`      | add `EntityDataModule`                                    |\n| `a-ngrx-data-entity-metadata`                | create the entity metadata for NgRx                       |\n| `a-ngrx-data-entity-collection-data-service` | create a data service using NgRx                          |\n\n### Dockerfile Snippets\n\n| Snippet                           | Purpose                                      |\n| --------------------------------- | -------------------------------------------- |\n| `docker-angular-node-multi-stage` | Multi-stage Dockerfile for Node with Angular |\n\n### JavaScript Snippets\n\n| Snippet            | Purpose                |\n| ------------------ | ---------------------- |\n| `ex-simple-server` | Node.js Express Server |\n\n### HTML Snippets\n\n| Snippet              | Purpose                                             |\n| -------------------- | --------------------------------------------------- |\n| `a-class`            | `[class]` binding                                   |\n| `a-select`           | `\u003cselect\u003e` control                                  |\n| `a-style`            | `[style]` binding                                   |\n| `a-ngClass`          | `ngClass`                                           |\n| `a-ngFor`            | `*ngFor`                                            |\n| `a-ngForAsync`       | `*ngFor` with async                                 |\n| `a-ngFor-trackBy`    | `*ngFor` with trackBy                               |\n| `a-form`             | create a form tag with ngSubmit and form attributes |\n| `a-formArrayName`    | `formArrayName`                                     |\n| `a-formControlName`  | `formControlName`                                   |\n| `a-formGroup`        | `formGroup`                                         |\n| `a-formGroupName`    | `formGroupName`                                     |\n| `a-form-submit`      | create a submit button for a form                   |\n| `a-ngIf`             | `*ngIf`                                             |\n| `a-ngIfElse`         | `*ngIf` with `else`                                 |\n| `a-ngModel`          | `ngModel`                                           |\n| `a-routerLink`       | `routerLink`                                        |\n| `a-routerLink-param` | `routerLink` with a route parameter                 |\n| `a-ngStyle`          | `ngStyle`                                           |\n| `a-ngSwitch`         | `ngSwitch`                                          |\n| `a-prej`             | show the JSON form of a model                       |\n| `a-preja`            | show the JSON form of a model, using async          |\n| `a-ng-container`     | `\u003cng-container\u003e` element                            |\n| `a-ng-content`       | `\u003cng-content\u003e` element                              |\n\n### VS Code Snippets\n\n| Snippet           | Purpose                                                              |\n| ----------------- | -------------------------------------------------------------------- |\n| `a-launch-chrome` | launch/debug configuration for VS Code for Chrome                    |\n| `a-launch-edge`   | launch/debug configuration for VS Code for Edge                      |\n| `a-task-start`    | create a task configuration for starting the Angular app for VS Code |\n\n## Installation\n\n1. Install Visual Studio Code 1.10.0 or higher\n1. Launch Code\n1. From the command palette `Ctrl`-`Shift`-`P` (Windows, Linux) or `Cmd`-`Shift`-`P` (OSX)\n1. Select `Install Extension`\n1. Choose the extension\n1. Reload Visual Studio Code\n\n## Credits\n\nThanks to the following contributors for the NgRx snippets:\n\n- [Wes Grimes](https://twitter.com/wesgrimes)\n- [Tim Deschryver](https://twitter.com/tim_deschryver)\n","funding_links":["https://github.com/sponsors/johnpapa"],"categories":["TypeScript","angular","Development Utilities"],"sub_categories":["Editor and IDE Extensions"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnpapa%2Fvscode-angular-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohnpapa%2Fvscode-angular-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnpapa%2Fvscode-angular-snippets/lists"}