Repository: MrZaYaC/ng2-webstorm-snippets
Branch: master
Commit: c709bf759290
Files: 5
Total size: 29.6 KB

Directory structure:
gitextract_aml89cmv/

├── .gitignore
├── README.md
├── dist/
│   └── ng2-templates.xml
├── package.json
└── src/
    └── app.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
*.DS_Store
npm-debug.log*
node_modules
.npm
Thumbs.db
.idea

================================================
FILE: README.md
================================================
# Angular 2 TypeScript Live Templates (Snippets) for WebStorm

This script convert Angular 2 for TypeScript and HTML snippets from Visual Studio Code 
(Written by [John Papa](https://github.com/johnpapa/vscode-angular2-snippets)) to WebStorm Live Templates.

![Usage in TypeScript](images/typescript-snippets.gif)

## Installing the templates

### From JetBrains Plugin repository

- Open IDE preferences `Cmd + ,`
- Go to `Plugins -> Browse repositories`
- Type `angular` and install `Angular 2 TypeScript Templates`
- Restart WebStorm

![Install Plugin](images/install-snippets.gif)

### By Copy xml file

- Clone repo or download [ng2-templates.xml](https://github.com/MrZaYaC/ng2-webstorm-snippets/blob/master/dist/ng2-templates.xml)
- Place the XML file in your [templates folder](https://www.jetbrains.com/webstorm/help/project-and-ide-settings.html)
: On OSX that would be ~/Library/Preferences/WebStorm{Version}/templates

- Restart WebStorm

## Usage
Type part of a snippet, press `enter`, and the snippet unfolds.

### TypeScript Angular Snippets
```typescript
a-component                 // component
a-component-root            // root app component
a-directive                 // directive
a-guard-can-activate        // CanActivate guard
a-guard-can-activate-child  // CanActivateChild guard
a-guard-can-deactivate      // CanDeactivate guard
a-guard-can-load            // CanLoad guard
a-http-get                  // http.get with Rx Observable
a-module                    // module
a-module-root               // root app module
a-module-routing            // routing module file (forChild)
a-output-event              // @Output event and emitter
a-pipe                      // pipe
a-route-path-404            // 404 route path
a-route-path-default        // default route path
a-route-path-eager          // eager route path
a-route-path-lazy           // lazy route path
a-service                   // service
a-service-http              // service with Http
a-ctor-skip-self            // angular ngmodule's skipself constructor
a-subscribe                 // Rx Observable subscription
```

### TypeScript RxJS Snippets
```typescript
rx-observable               // Rx Observable import
rx-subject                  // Rx Subject import
rx-replay-subject           // Rx ReplaySubject import
rx-behavior-subject         // Rx BehaviorSubject import
rx-add-operator             // Rx add operator import
rx-add-observable           // Rx add observable import
```

###HTML Snippets
```html
a-class                     // [class] binding
a-select                    // <select> control
a-style                     // [style] binding
a-ngClass                   // ngClass
a-ngFor                     // *ngFor
a-ngForAsync                // *ngFor with async
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                      // pre debug | json
a-preja                     // pre debug | async | json
```

![Usage in HTML](images/html-snippets.gif)

================================================
FILE: dist/ng2-templates.xml
================================================
<templateSet group="Angular2 TypeScript Live Templates">
    <template name="a-component" value="import { Component, OnInit } from &#39;@angular/core&#39;;&#10;&#10;@Component({&#10;	selector: &#39;$selectorname$&#39;,&#10;	templateUrl: &#39;$name$.component.html&#39;&#10;})&#10;&#10;export class $Name$Component implements OnInit {&#10;	constructor() { }&#10;&#10;	ngOnInit() { }$END$&#10;}" description="Angular component" toReformat="false" toShortenFQNames="true">
      <variable name="selectorname" defaultValue="&quot;selector-name&quot;" alwaysStopAt="true"/>
      <variable name="name" defaultValue="&quot;name&quot;" alwaysStopAt="true"/>
      <variable name="Name" defaultValue="&quot;Name&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-service" value="import { Injectable } from &#39;@angular/core&#39;;&#10;&#10;@Injectable()&#10;export class $Name$Service {&#10;$END$&#10;	constructor() { }&#10;}" description="Angular service" toReformat="false" toShortenFQNames="true">
      <variable name="Name" defaultValue="&quot;Name&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-pipe" value="import { Pipe, PipeTransform } from &#39;@angular/core&#39;;&#10;&#10;@Pipe({&#10;	name: &#39;$selectorname$&#39;&#10;})&#10;&#10;export class $Name$Pipe implements PipeTransform {&#10;	transform(value: any, ...args: any[]): any {&#10;		$END$&#10;	}&#10;}" description="Angular pipe" toReformat="false" toShortenFQNames="true">
      <variable name="selectorname" defaultValue="&quot;selector-name&quot;" alwaysStopAt="true"/>
      <variable name="Name" defaultValue="&quot;Name&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-route-path-default" value="{ path: &#39;&#39;, pathMatch: &#39;full&#39;, redirectTo: &#39;$path$&#39; }$END$" description="Angular default route path" toReformat="false" toShortenFQNames="true">
      <variable name="path" defaultValue="&quot;path&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-route-path-404" value="{ path: &#39;**&#39;, pathMatch: &#39;full&#39;, component: $PathNotFoundComponent$ }$END$" description="Angular 404 route path" toReformat="false" toShortenFQNames="true">
      <variable name="PathNotFoundComponent" defaultValue="&quot;PathNotFoundComponent&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-route-path-eager" value="{ path: &#39;$path$&#39;, component: $Name$Component }," description="Angular eager route path" toReformat="false" toShortenFQNames="true">
      <variable name="path" defaultValue="&quot;path&quot;" alwaysStopAt="true"/>
      <variable name="Name" defaultValue="&quot;Name&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-route-path-lazy" value="{ path: &#39;$path$&#39;, loadChildren: &#39;$lazypath$#$lazymodule$&#39; }," description="Angular lazy route path" toReformat="false" toShortenFQNames="true">
      <variable name="path" defaultValue="&quot;path&quot;" alwaysStopAt="true"/>
      <variable name="lazypath" defaultValue="&quot;lazy-path&quot;" alwaysStopAt="true"/>
      <variable name="lazymodule" defaultValue="&quot;lazy-module&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-http-get" value="return this.http.get(&#39;$url$&#39;)&#10;	.map((response: Response) =&gt; response.json()$END$);" description="Angular Http.get" toReformat="false" toShortenFQNames="true">
      <variable name="url" defaultValue="&quot;url&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-service-http" value="import { Injectable } from &#39;@angular/core&#39;;&#10;import { Http, Response } from &#39;@angular/http&#39;;&#10;import { Observable } from &#39;rxjs/Observable&#39;;&#10;import &#39;rxjs/add/operator/map&#39;;&#10;import &#39;rxjs/add/operator/catch&#39;;&#10;&#10;@Injectable()&#10;export class $ServiceName$Service {&#10;	constructor(private http: Http) { }&#10;	$END$&#10;}" description="Angular service with Http" toReformat="false" toShortenFQNames="true">
      <variable name="ServiceName" defaultValue="&quot;ServiceName&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-output-event" value="@Output() $eventName$: EventEmitter&lt;$eventType$&gt; = new EventEmitter&lt;$eventType$&gt;();" description="Angular @Output event and emitter" toReformat="false" toShortenFQNames="true">
      <variable name="eventName" defaultValue="&quot;eventName&quot;" alwaysStopAt="true"/>
      <variable name="eventType" defaultValue="&quot;eventType&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-subscribe" value="this.$service$.$function$&#10;	.subscribe($arg$ =&gt; this.$property$ = $arg$);&#10;$END$" description="Angular observable subscribe" toReformat="false" toShortenFQNames="true">
      <variable name="service" defaultValue="&quot;service&quot;" alwaysStopAt="true"/>
      <variable name="function" defaultValue="&quot;function&quot;" alwaysStopAt="true"/>
      <variable name="arg" defaultValue="&quot;arg&quot;" alwaysStopAt="true"/>
      <variable name="property" defaultValue="&quot;property&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-component-root" value="import { Component } from &#39;@angular/core&#39;;&#10;&#10;@Component({&#10;	selector: &#39;$prefixapp$&#39;,&#10;	template: `&#10;		&lt;router-outlet&gt;&lt;/router-outlet&gt;&#10;		`&#10;})&#10;export class $App$Component { }&#10;$END$" description="Angular App root component" toReformat="false" toShortenFQNames="true">
      <variable name="prefixapp" defaultValue="&quot;prefix-app&quot;" alwaysStopAt="true"/>
      <variable name="App" defaultValue="&quot;App&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-module-root" value="import { NgModule } from &#39;@angular/core&#39;;&#10;import { BrowserModule  } from &#39;@angular/platform-browser&#39;;&#10;import { HttpModule } from &#39;@angular/http&#39;;&#10;&#10;import { $App$Component } from &#39;./$app$.component&#39;;&#10;import { AppRoutingModule } from &#39;./$app$.routing&#39;; //TODO: Create $app$.routing&#10;&#10;@NgModule({&#10;	imports: [&#10;		BrowserModule,&#10;		HttpModule,&#10;	&#10;		AppRoutingModule,&#10;	],&#10;	declarations: [$App$Component],&#10;	providers: [/* TODO: Providers go here */],&#10;	bootstrap: [$App$Component],&#10;})&#10;export class $App$Module { }&#10;$END$" description="Angular Root Module" toReformat="false" toShortenFQNames="true">
      <variable name="App" defaultValue="&quot;App&quot;" alwaysStopAt="true"/>
      <variable name="app" defaultValue="&quot;app&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-module-routing" value="import { NgModule } from &#39;@angular/core&#39;;&#10;import { Routes, RouterModule } from &#39;@angular/router&#39;;&#10;&#10;import { $Name$Component } from &#39;./$name$.component&#39;;&#10;&#10;const routes: Routes = [&#10;  { path: &#39;$path$&#39;, component: $Name$Component },&#10;];&#10;&#10;@NgModule({&#10;  imports: [RouterModule.forChild(routes)],&#10;  exports: [RouterModule],&#10;})&#10;export class $Name$RoutingModule { }&#10;&#10;export const routedComponents = [$Name$Component];" description="Angular routing module file (forChild)" toReformat="false" toShortenFQNames="true">
      <variable name="Name" defaultValue="&quot;Name&quot;" alwaysStopAt="true"/>
      <variable name="name" defaultValue="&quot;name&quot;" alwaysStopAt="true"/>
      <variable name="path" defaultValue="&quot;path&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-module" value="import { NgModule } from &#39;@angular/core&#39;;&#10;&#10;import { $Name$Component } from &#39;./$name$.component&#39;;&#10;&#10;@NgModule({&#10;	imports: [],&#10;	exports: [],&#10;	declarations: [$Name$Component],&#10;	providers: [],&#10;})&#10;export class $Name$Module { }&#10;$END$" description="Angular Module" toReformat="false" toShortenFQNames="true">
      <variable name="Name" defaultValue="&quot;Name&quot;" alwaysStopAt="true"/>
      <variable name="name" defaultValue="&quot;name&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-directive" value="import { Directive } from &#39;@angular/core&#39;;&#10;&#10;@Directive({ selector: &#39;[$selectorname$]&#39; })&#10;export class $Name$Directive {&#10;	constructor() { }&#10;}" description="Angular directive" toReformat="false" toShortenFQNames="true">
      <variable name="selectorname" defaultValue="&quot;selector-name&quot;" alwaysStopAt="true"/>
      <variable name="Name" defaultValue="&quot;Name&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-guard-can-activate" value="import { Injectable } from &#39;@angular/core&#39;;&#10;import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from &#39;@angular/router&#39;;&#10;&#10;@Injectable()&#10;export class $Name$Guard implements CanActivate {&#10;	constructor() { }&#10;&#10;	canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {&#10;		return true;$END$&#10;	}&#10;}" description="Angular CanActivate guard" toReformat="false" toShortenFQNames="true">
      <variable name="Name" defaultValue="&quot;Name&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-guard-can-activate-child" value="import { Injectable } from &#39;@angular/core&#39;;&#10;import { ActivatedRouteSnapshot, CanActivateChild, RouterStateSnapshot } from &#39;@angular/router&#39;;&#10;&#10;@Injectable()&#10;export class $Name$Guard implements CanActivateChild {&#10;	constructor() { }&#10;&#10;	canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {&#10;		return true;$END$&#10;	}&#10;}" description="Angular CanActivateChild guard" toReformat="false" toShortenFQNames="true">
      <variable name="Name" defaultValue="&quot;Name&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-guard-can-load" value="import { Injectable } from &#39;@angular/core&#39;;&#10;import { CanLoad, Route } from &#39;@angular/router&#39;;&#10;&#10;@Injectable()&#10;export class $Name$Guard implements CanLoad {&#10;	constructor() { }&#10;&#10;	canLoad(route: Route) {&#10;		return true;$END$&#10;	}&#10;}" description="Angular CanLoad guard" toReformat="false" toShortenFQNames="true">
      <variable name="Name" defaultValue="&quot;Name&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-guard-can-deactivate" value="import { Injectable } from &#39;@angular/core&#39;;&#10;import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot } from &#39;@angular/router&#39;;&#10;import { Observable } from &#39;rxjs/Observable&#39;;&#10;&#10;import { $ComponentName$Component } from &#39;./$filename$.component&#39;;&#10;&#10;// Consider using this interface for all CanDeactivate guards,&#10;// and have your components implement this interface, too.&#10;//&#10;//   e.g. export class CanDeactivateGuard implements CanDeactivate&lt;CanComponentDeactivate&gt; {&#10;//&#10;// export interface CanComponentDeactivate {&#10;// canDeactivate: () =&gt; any;&#10;// }&#10;&#10;@Injectable()&#10;export class $Name$Guard implements CanDeactivate&lt;$ComponentName$Component&gt; {&#10;	canDeactivate(&#10;		component: $ComponentName$Component,&#10;		currentRoute: ActivatedRouteSnapshot, &#10;		currentState: RouterStateSnapshot&#10;	): Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean {&#10;		return false;$END$&#10;	}&#10;}" description="Angular CanDeactivate guard" toReformat="false" toShortenFQNames="true">
      <variable name="ComponentName" defaultValue="&quot;ComponentName&quot;" alwaysStopAt="true"/>
      <variable name="filename" defaultValue="&quot;filename&quot;" alwaysStopAt="true"/>
      <variable name="Name" defaultValue="&quot;Name&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-ctor-skip-self" value="constructor( @Optional() @SkipSelf() parentModule: $ModuleName$ {&#10;	if (parentModule) {&#10;		const msg = `$ModuleName$ has already been loaded. &#10;			Import $ModuleName$ once, only, in the root AppModule.`;&#10;		throw new Error(msg);&#10;	}&#10;}" description="Angular Module SkipSelf constructor" toReformat="false" toShortenFQNames="true">
      <variable name="ModuleName" defaultValue="&quot;ModuleName&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="rx-observable" value="import { Observable } from &#39;rxjs/Observable&#39;;&#10;$END$" description="RxJS Observable import" toReformat="false" toShortenFQNames="true">
      
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="rx-replay-subject" value="import { ReplaySubject } from &#39;rxjs/ReplaySubject&#39;;&#10;$END$" description="RxJS ReplaySubject import" toReformat="false" toShortenFQNames="true">
      
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="rx-subject" value="import { Subject } from &#39;rxjs/Subject&#39;;&#10;$END$" description="RxJS Subject import" toReformat="false" toShortenFQNames="true">
      
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="rx-behavior-subject" value="import { BehaviorSubject } from &#39;rxjs/BehaviorSubject&#39;;&#10;$END$" description="RxJS BehaviorSubject import" toReformat="false" toShortenFQNames="true">
      
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="rx-add-operator" value="import &#39;rxjs/add/operator/$map$&#39;;&#10;$END$" description="RxJS Add Operator import" toReformat="false" toShortenFQNames="true">
      <variable name="map" defaultValue="&quot;map&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="rx-add-observable" value="import &#39;rxjs/add/observable/$of$&#39;;&#10;$END$" description="RxJS Add Observable import" toReformat="false" toShortenFQNames="true">
      <variable name="of" defaultValue="&quot;of&quot;" alwaysStopAt="true"/>
      <context>
         <option name="TypeScript" value="true"/>
       </context>
    </template>
  
    <template name="a-class" value="[class]=&quot;$expression$&quot;" description="Angular [class] binding" toReformat="false" toShortenFQNames="true">
      <variable name="expression" defaultValue="&quot;expression&quot;" alwaysStopAt="true"/>
      <context>
          <option name="HTML" value="true" />
          <option name="JADE" value="true" />
      </context>
    </template>
  
    <template name="a-style" value="[style.$property$]=&quot;$expression$&quot;" description="Angular [style] binding" toReformat="false" toShortenFQNames="true">
      <variable name="property" defaultValue="&quot;property&quot;" alwaysStopAt="true"/>
      <variable name="expression" defaultValue="&quot;expression&quot;" alwaysStopAt="true"/>
      <context>
          <option name="HTML" value="true" />
          <option name="JADE" value="true" />
      </context>
    </template>
  
    <template name="a-ngClass" value="[ngClass]=&quot;{$cssClass$: $expression$}&quot;" description="Angular ngClass" toReformat="false" toShortenFQNames="true">
      <variable name="cssClass" defaultValue="&quot;cssClass&quot;" alwaysStopAt="true"/>
      <variable name="expression" defaultValue="&quot;expression&quot;" alwaysStopAt="true"/>
      <context>
          <option name="HTML" value="true" />
          <option name="JADE" value="true" />
      </context>
    </template>
  
    <template name="a-ngFor" value="*ngFor=&quot;let $item$ of $list$&quot;" description="Angular *ngFor" toReformat="false" toShortenFQNames="true">
      <variable name="item" defaultValue="&quot;item&quot;" alwaysStopAt="true"/>
      <variable name="list" defaultValue="&quot;list&quot;" alwaysStopAt="true"/>
      <context>
          <option name="HTML" value="true" />
          <option name="JADE" value="true" />
      </context>
    </template>
  
    <template name="a-ngForAsync" value="*ngFor=&quot;let $item$ of $stream$ | async as $list$&quot;" description="Angular *ngForAsync" toReformat="false" toShortenFQNames="true">
      <variable name="item" defaultValue="&quot;item&quot;" alwaysStopAt="true"/>
      <variable name="stream" defaultValue="&quot;stream&quot;" alwaysStopAt="true"/>
      <variable name="list" defaultValue="&quot;list&quot;" alwaysStopAt="true"/>
      <context>
          <option name="HTML" value="true" />
          <option name="JADE" value="true" />
      </context>
    </template>
  
    <template name="a-ngIf" value="*ngIf=&quot;$expression$&quot;" description="Angular *ngIf" toReformat="false" toShortenFQNames="true">
      <variable name="expression" defaultValue="&quot;expression&quot;" alwaysStopAt="true"/>
      <context>
          <option name="HTML" value="true" />
          <option name="JADE" value="true" />
      </context>
    </template>
  
    <template name="a-ngIfElse" value="*ngIf=&quot;$expression$;else $templateName$&quot;" description="Angular *ngIfElse" toReformat="false" toShortenFQNames="true">
      <variable name="expression" defaultValue="&quot;expression&quot;" alwaysStopAt="true"/>
      <variable name="templateName" defaultValue="&quot;templateName&quot;" alwaysStopAt="true"/>
      <context>
          <option name="HTML" value="true" />
          <option name="JADE" value="true" />
      </context>
    </template>
  
    <template name="a-ngModel" value="[(ngModel)]=&quot;$binding$&quot;" description="Angular ngModel" toReformat="false" toShortenFQNames="true">
      <variable name="binding" defaultValue="&quot;binding&quot;" alwaysStopAt="true"/>
      <context>
          <option name="HTML" value="true" />
          <option name="JADE" value="true" />
      </context>
    </template>
  
    <template name="a-routerLink" value="[routerLink]=&quot;[&#39;/$routePath$&#39;]&quot;$END$" description="Angular routerLink" toReformat="false" toShortenFQNames="true">
      <variable name="routePath" defaultValue="&quot;routePath&quot;" alwaysStopAt="true"/>
      <context>
          <option name="HTML" value="true" />
          <option name="JADE" value="true" />
      </context>
    </template>
  
    <template name="a-routerLink-param" value="[routerLink]=&quot;[&#39;$routePath$&#39;, $routeParameterValue$$END$]&quot;" description="Angular routerLink with a route parameter" toReformat="false" toShortenFQNames="true">
      <variable name="routePath" defaultValue="&quot;routePath&quot;" alwaysStopAt="true"/>
      <variable name="routeParameterValue" defaultValue="&quot;routeParameterValue&quot;" alwaysStopAt="true"/>
      <context>
          <option name="HTML" value="true" />
          <option name="JADE" value="true" />
      </context>
    </template>
  
    <template name="a-select" value="&lt;select [(ngModel)]=&quot;$model$&quot;&gt;&#10;	&lt;option *ngFor=&quot;let $item$ of $list$&quot; [value]=&quot;$item$&quot;&gt;{{$item$}}&lt;/option&gt;&#10;&lt;/select&gt;" description="&lt;select&gt; control with ngModel" toReformat="false" toShortenFQNames="true">
      <variable name="model" defaultValue="&quot;model&quot;" alwaysStopAt="true"/>
      <variable name="item" defaultValue="&quot;item&quot;" alwaysStopAt="true"/>
      <variable name="list" defaultValue="&quot;list&quot;" alwaysStopAt="true"/>
      <context>
          <option name="HTML" value="true" />
          <option name="JADE" value="true" />
      </context>
    </template>
  
    <template name="a-ngStyle" value="[ngStyle]=&quot;{$style$: $expression$}&quot;" description="Angular ngStyle" toReformat="false" toShortenFQNames="true">
      <variable name="style" defaultValue="&quot;style&quot;" alwaysStopAt="true"/>
      <variable name="expression" defaultValue="&quot;expression&quot;" alwaysStopAt="true"/>
      <context>
          <option name="HTML" value="true" />
          <option name="JADE" value="true" />
      </context>
    </template>
  
    <template name="a-ngSwitch" value="&lt;div [ngSwitch]=&quot;$conditionExpression$&quot;&gt;&#10;	&lt;div *ngSwitchCase=&quot;$expression$&quot;&gt;$output$&lt;/div&gt;&#10;	&lt;div *ngSwitchDefault&gt;$output2$&lt;/div&gt;&#10;&lt;/div&gt;" description="Angular ngSwitch" toReformat="false" toShortenFQNames="true">
      <variable name="conditionExpression" defaultValue="&quot;conditionExpression&quot;" alwaysStopAt="true"/>
      <variable name="expression" defaultValue="&quot;expression&quot;" alwaysStopAt="true"/>
      <variable name="output" defaultValue="&quot;output&quot;" alwaysStopAt="true"/>
      <variable name="output2" defaultValue="&quot;output2&quot;" alwaysStopAt="true"/>
      <context>
          <option name="HTML" value="true" />
          <option name="JADE" value="true" />
      </context>
    </template>
  
    <template name="a-prej" value="&lt;pre&gt;{{$var1$ | json}}&lt;/pre&gt;$var2$" description="Angular pre debug | json" toReformat="false" toShortenFQNames="true">
      <variable name="var1" defaultValue="&quot;&quot;" alwaysStopAt="true"/>
      <variable name="var2" defaultValue="&quot;&quot;" alwaysStopAt="true"/>
      <context>
          <option name="HTML" value="true" />
          <option name="JADE" value="true" />
      </context>
    </template>
  
    <template name="a-preja" value="&lt;pre&gt;{{$var1$ | async | json}}&lt;/pre&gt;$var2$" description="Angular pre debug | async | json" toReformat="false" toShortenFQNames="true">
      <variable name="var1" defaultValue="&quot;&quot;" alwaysStopAt="true"/>
      <variable name="var2" defaultValue="&quot;&quot;" alwaysStopAt="true"/>
      <context>
          <option name="HTML" value="true" />
          <option name="JADE" value="true" />
      </context>
    </template>
  </templateSet>

================================================
FILE: package.json
================================================
{
  "name": "ng2-webstorm-snippets",
  "version": "2.0.0",
  "description": "Angular 2 TypeScript snippets for WebStorm based on John Papa snippets for Visual Code",
  "main": "src/app.js",
  "scripts": {
    "start": "node src/app.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "prestart": "npm install"
  },
  "author": "Denis Zaichenko",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git@github.com:MrZaYaC/ng2-webstorm-snippets.git"
  },
  "engines" : {
    "node" : ">=4.0.0 <6.0.0"
  },
  "dependencies": {
    "Angular2": "github:johnpapa/vscode-angular2-snippets",
    "escape-html": "^1.0.3"
  }
}


================================================
FILE: src/app.js
================================================
'use strict';
const fs = require('fs');
const escape = require('escape-html');

const TYPESCRIPT_FILE = `${__dirname}/../node_modules/Angular2/snippets/typescript.json`;
const HTML_FILE = `${__dirname}/../node_modules/Angular2/snippets/html.json`;

const vsTsTemplate = JSON.parse(fs.readFileSync(TYPESCRIPT_FILE, 'utf8'));
const vsHTMLTemplate = JSON.parse(fs.readFileSync(HTML_FILE, 'utf8'));

let webshtormXML = '<templateSet group="Angular2 TypeScript Live Templates">';

webshtormXML += convert(vsTsTemplate, 'typescript');
webshtormXML += convert(vsHTMLTemplate, 'html');

webshtormXML += '</templateSet>';

fs.writeFileSync(`${__dirname}/../dist/ng2-templates.xml`, webshtormXML, 'utf8');

console.log('\x1b[32m', "- created", '\x1b[0m', "/dist/ng2-templates.xml");

function convert(vsTemplate, type) {
  const variableRegexp = /\$\{([^\}|^0]+)\}/g;
  const caretRegexp = /(\$[1-9])/g;
  let webstormXml = '';
  let context =
      `<context>
         <option name="TypeScript" value="true"/>
       </context>`;

  if (type === 'html') {
    context =
      `<context>
          <option name="HTML" value="true" />
          <option name="JADE" value="true" />
      </context>`;
  }



  for (const key in vsTemplate) {
    let vars = [];
    let body = [];
    let varsXml = [];

    for (let line of vsTemplate[key].body) {
      if (variableRegexp.test(line)) {
        line = line.replace(variableRegexp, (match, p1) => {
          const name = p1.replace(/\d:/, '').replace('-', '');
          const value = p1.replace(/\d:/, '');
          if (!vars.filter(item => item.name === name).length) {
            vars.push({name, value});
          }
          return `$${name}$`;
        });
      }
      if (caretRegexp.test(line)) {
        line = line.replace(caretRegexp, (match, p1) => {
          const name = p1.replace(/\$([1-9])/, 'var$1');
          const value = p1.replace(/\$([1-9])/, '');
          if (!vars.filter(item => item.name === name).length) {
            vars.push({name, value});
          }
          return `$${name}$`;
        });
      }
      line = line.replace('$0', '$END$');
      line = line.replace('${0}', '$END$');
      line = escape(line);
      body.push(line);
    }
    if (vars.length) {
      for (const item of vars) {
        varsXml.push(`<variable name="${item.name}" defaultValue="&quot;${item.value}&quot;" alwaysStopAt="true"/>`);
      }
    }

    webstormXml += `
    <template name="${vsTemplate[key].prefix}" value="${body.join('&#10;')}" description="${escape(vsTemplate[key].description)}" toReformat="false" toShortenFQNames="true">
      ${varsXml.join("\n      ")}
      ${context}
    </template>
  `
  }
  
  return webstormXml;
}