<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>
