Skip to content

Instantly share code, notes, and snippets.

@pidupuis
Last active Apr 26, 2016
Embed
What would you like to do?
Atom snippets for Angular2
'.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}
});
"""
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment