Atom snippets for Angular2

snippets.cson

'.source.html':
  'ngClass':
    'prefix': 'ngclass',
    'description': 'Angular 2 ngClass snippet'
    'body': """
      [ngClass]=\"{${cssClass}: ${expression}}\"
    """
  'ngFor':
    'prefix': 'ngfor',
    'description': 'Angular 2 *ngFor snippet'
    'body': """
      *ngFor=\"#${item} of ${list}\"
    """
  'ngIf':
    'prefix': 'ngif',
    'description': 'Angular 2 *ngIf snippet'
    'body': """
      *ngIf=\"${expression}\"
    """
  'ngModel':
    'prefix': 'ngmodel',
    'description': 'Angular 2 ngModel snippet'
    'body': """
      [(ngModel)]=\"${binding}\"
    """
  'ngRouterLink':
    'prefix': 'ngrouterlink',
    'description': 'Angular 2 routerLink snippet'
    'body': """
      [routerLink]=\"['${routeName}']\"
    """
  'ngStyle':
    'prefix': 'ngstyle',
    'description': 'Angular 2 ngStyle snippet'
    'body': """
      [ngStyle]=\"{${style}: ${expression}}\"
    """
  'ngSwitch':
    'prefix': 'ngswitch',
    'description': 'Angular 2 ngSwitch snippet'
    'body': """
      <div [ngSwitch]=\"${conditionExpression}\">
      \t<div *ngSwitchWhen=\"${expression}\">${output}</div>
      \t<div *ngSwitchDefault>${output2}</div>
      </div>
    """

'.source.ts':
  'Angular Component':
    'prefix': 'ngcomponent'
    'description': 'Angular 2 component snippet'
    'body': """
      import { Component OnInit } from 'angular2/core';

      @Component({
      \tselector: '${1:selector}'
      \ttemplateUrl: '${2:path}/${3:name}.component.html'
      })
      export class ${4:ComponentName}Component implements OnInit {
      \tconstructor() { }

      \tngOnInit() { }
      ${5}
      }
    """
  'Angular Service':
    'prefix': 'ngservice'
    'description': 'Angular 2 service snippet'
    'body': """
      import { Injectable } from 'angular2/core';

      @Injectable()
      export class ${1:ServiceName}Service {
      ${2}
      \tconstructor() { }

      }
    """
  'Angular Pipe':
    'prefix': 'ngpipe'
    'description': 'Angular 2 pipe snippet'
    'body': """
      import { Pipe PipeTransform } from 'angular2/core';

      @Pipe({
      \tname: '${1:name}'
      })

      export class ${2:PipeName}Pipe implements PipeTransform {
      \ttransform(value: ${3:valuetype} args: ${4:argstype}) : any {
      \t\t${5}
      \t}
      }
    """
  'Angular Routes':
    'prefix': 'ngroutes'
    'description': 'Angular 2 route config snippet'
    'body': """
      @RouteConfig([
      \t{ path: '/${1:path}' as: '${2:RouteName}' component: ${3:Component} }${4}
      ])
    """
  'Angular RouteDefinition':
    'prefix': 'ngroute-path'
    'description': 'Angular 2 route path snippet'
    'body': """
      { path: '/${1:path}' as: '${2:RouteName}' component: ${3:Component} }${4}
    """
  'Subscribe':
    'prefix': 'ngsubscribe'
    'description': 'Angular 2 observable subscribe snippet'
    'body': """
      this.${1:service}.${2:function}
      \t.subscribe(${3:arg} => this.${4:property} = ${5:arg});
      ${6}
    """
  'Angular Bootstrapping':
    'prefix': 'ngbootstrap'
    'description': 'Angular 2 bootstrap snippet'
    'body': """
      import { bootstrap } from 'angular2/platform/browser';
      import { ${1:AppComponent} } from './${2:name}.component';

      bootstrap(${3:AppComponent} [])
      \t.then(success => console.log(`Bootstrap success`))
      \t.catch(error => console.log(error));
      ${4}
    """
  'AppComponent':
    'prefix': 'ngcomponentroot'
    'description': 'Angular 2 App root component snippet'
    'body': """
      import { Component } from 'angular2/core';
      import { HTTP_PROVIDERS } from 'angular2/http';
      import { RouteConfig ROUTER_DIRECTIVES ROUTER_PROVIDERS } from 'angular2/router';
      import 'rxjs/Rx'; // load the full rxjs

      @Component({
      \tselector: '${1:selector}'
      \ttemplateUrl: '${2:path}/${3:name}.component.html'
      \tdirectives: [ROUTER_DIRECTIVES]
      \tproviders: [
      \t  HTTP_PROVIDERS
      \t  ROUTER_PROVIDERS
      \t]
      })
      @RouteConfig([
      \t${4}
      ])
      export class AppComponent {}
    """
  'Angular Test Suite':
    'prefix': 'ngdescribe'
    'description': 'Angular 2 test suite snippet'
    'body': """
      describe('${1:Suite}', () => {
      \t${2}
      });
    """
  'Angular Test Spec':
    'prefix': 'ngspec'
    'description': 'Angular 2 test spec snippet'
    'body': """
      it('${1:spec}', () => {
      \t${2}
      });
    """