Plugin: Angular TypeScript Snippets

Let's talk about one of the best plugins for VsCode and Angular developers.

This extension adds code snippets for Angular, TypeScript and HTML and is updated for Angular 12 (at the time of writing).

It is very easy to use this plugin. Just type the beginning of a code and press Enter, like this:

We can type a-ngfor and the autocompletion will show some options. If we press Enter, then a complete template will be shown as the example below:

Some code snippets have a context. We can't use a a-ngFor in TypeScript or Angular code, but only in HTML. Let's see some of the code for each language.

Angular/Typescript snippets

Snippet	Make
a-component	A component
a-directive	A directive
a-httpclient-get	return this.httpClient.get('url');
a-module	A module
a-pipe	A pipe
a-routes	Route definition file export const routes: Routes = []
a-route-path-default	{ path: '', pathMatch: 'full', redirectTo: 'path' },
a-route-path-eager	{ path: 'path', component: NameComponent },
a-service	A service
a-subscribe	When you want to subscribe a function on a service: this.service.function.subscribe(arg => this.property = arg);

These are the snippets you will probably use the most. If you want to see more code snippets see the Github page.

HTML Snippets

To use the HTML snippets you need a context like an HTML tag, for example, a div or a select.

Then, let's see a table with the most used snippets for HTML:

Snippet	Make
a-class	[class] binding <div [class]="expression"></div>
a-select	<select> control <select [(ngModel)]="model"> <option *ngFor="let item of list" [value]="item">{{item}}</option> </select>
a-style	<div [style.property]="expression"></div>
a-ngClass	<div [ngClass]="{cssClass: expression}"></div>
a-ngFor	<div *ngFor="let item of list"></div>
a-form	<form (ngSubmit)="onSubmit()" #form="ngForm"> </form>
a-ngIf	<div *ngIf="expression"></div>
a-routerLink	<div [routerLink]="['/routePath']" routerLinkActive="router-link-active" ></div>
a-ngStyle	<div [ngStyle]="{style: expression}"></div>

How to install it

Extensions (left-hand side) > search for Angular Snippets (Version 12) (by John Papa) > install (on the right-hand side).

This plugin will help us to write more code with less effort and have more productivity.

Finally, thank you to John Papa for this amazing plugin.