Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danwahlin/angular-snippets
This VS Code extension adds Angular/TypeScript/HTML code snippets into your editor.
https://github.com/danwahlin/angular-snippets
Last synced: 29 days ago
JSON representation
This VS Code extension adds Angular/TypeScript/HTML code snippets into your editor.
- Host: GitHub
- URL: https://github.com/danwahlin/angular-snippets
- Owner: DanWahlin
- License: mit
- Created: 2016-03-18T07:24:35.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-11-13T20:54:21.000Z (about 4 years ago)
- Last Synced: 2024-10-03T12:52:19.805Z (about 2 months ago)
- Homepage:
- Size: 91.8 KB
- Stars: 26
- Watchers: 3
- Forks: 17
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Angular, TypeScript and HTML Snippets for VS Code
This VS Code extension adds Angular, TypeScript and HTML code snippets into your editor.
## How To Use the Snippets
Type one of the snippet names below (or part of it) and then press return.
### TypeScript Snippets
```
ag-AppModule - Create the root app module (@NgModule) snippet
ag-AppFeatureModule - Angular app feature module (@NgModule) snippet
ag-AppFeatureRoutingModule - Angular app feature routing module (@NgModule) snippet
ag-CanActivateRoutingGuard - Create a CanActivate routing guard snippet
ag-CanDeactivateRoutingGuard - Create a CanDeactivate routing guard snippet
ag-Component - Component snippet
ag-HttpClientService - Service with HttpClient snippet
ag-InputProperty - @Input property snippet
ag-InputGetSet - @Input property with get/set
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
ag-Subscription - RxJS Subscription property
ag-ConcatMap - ConcatMap snippet used to handle multiple observables returned from a service (Http calls or others)
```
### HTML 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](https://code.visualstudio.com/docs/editor/extension-gallery?WT.mc_id=m365-0000-dwahlin) provides additional details.