Angular2 Snippets for Sublime Text

This package provides snippets and completions for Angular2. Sublime Text uses fuzzy searching for snippets/completions, therefore you can trigger either without having to write out the whole trigger.

Installation

Package Control

Notice: submission to package control is still pending so 'Manual' install is the only option at this time.

• open the Command Palette (⌘ + ⇧ + p | SUPER + SHIFT + p)
• select Package Control: Install Package (p + i)
• select Angular2 Snippets

Manual

• copy/clone the files into your Sublime Text User Preferences folder

Config

• to enable auto-completion add the following to User.sublime-preferences

  "auto_complete_triggers": [ {"selector": "text.html", "characters": "<"}, {"selector": "text.html meta.tag", "characters": " " } ]

Directory

Snippet Categories:

• Component
• Directive
• Service
• Pipe
• RouteConfig
• Route
• Test

Completion Categories:

• Annotations
• Decorators
• Lifecycle
• Routing
• Directives
• Attributes
• Pipes

Snippets

Component

Trigger: component

description	completion
@Component	@Component(${2}) export class ${1}Component {${3}}
@Component (Basic)	@Component({ selector: '${2}', template: '${3}', styles: '${4}' }) export class ${1}Component {${5}}
@Component (External)	@Component({ selector: '${2}', templateUrl: '${3}', styleUrls: ['${4}'] }) export class ${1}Component {${5}}
@Component (Complex)	@Component({ selector: '${2}', providers: ['${3}'], viewProviders: ['${4}'], template: '${5}', templateUrl: '${6}', styles: '${7}', styleUrls: ['${8}'], directives: ['${9}'], pipes: ['${10}'] }) export class ${1}Component {${11}}

Directive

Trigger: directive

description	completion
@Directive	@Directive({${2}}) export class ${1}Directive {${3}}
@Directive (Basic)	@Directive({ selector: '${2}' }) export class ${1}Directive {${3}}
@Directive (Complex)	@Directive({ selector: '${2}', providers: ['${3}'], properties: ['${4}'], host: {'${5}'} }) export class ${1}Directive {${6}}

Service

Trigger: service

description	completion
Service	@Injectable() export class ${1}Service {${2}}

Pipe

Trigger: pipe

description	completion
Pipe	@Pipe({ name: '${2}' }) export class ${1}Pipe implements PipeTransform { transform (value:number, args:${3:any}[]) : ${4:any} {${5}} }
Pipe (ES6)	@Pipe({ name: '${2}' }) export class ${1}Pipe { transform (value, args) {${3}} }

RouteConfig

Trigger: routeconfig

description	completion
@RouteConfig	@RouteConfig([ ${1} ])
@RouteConfig (Basic)	@RouteConfig([ { path: '/${1}', name: '${2}', component: ${2}Component, useAsDefault: true }${3} ]

Route

Trigger: route

description	completion
Route	{ path: '/${1}', name: '${2}', component: ${2}Component }${3}
Route (Default)	{ path: '/${1}', name: '${2}', component: ${2}Component, useAsDefault: true }${3}
Route (Redirect)	{ path: '/${1:**}', redirectTo: ['${2}'] }${3}
Route (Param)	{ path: '/${1}:${2}', name: '${3}', component: ${3}Component }${4}
Route (Wildcard)	{ path: '/${1}*${2}', name: '${3}', component: ${3}Component }${4}
Route (Data)	{ path: '/${1}', name: '${2}', component: ${2}Component, data: {${3}: ${4}} }${5}
Route (Parent)	{ path: '/${1}...', name: '${2}', component: ${2}Component }${3}

Test

description	completion

Completions

Annotations

trigger	completion
selector	selector: '$1'
inputs	inputs: [ '$1' ]
outputs	outputs: [ '$1' ]
providers	providers: [ $1 ]
viewProviders	viewProviders: [ $1 ]
template	template: ` $1 `
templateUrl	templateUrl: '$1'
styles	styles: ` $1 `
styleUrls	styleUrls: [ '$1' ]
directives	directives: [ $1 ]
pipes	pipes: [ $1 ]
properties	properties: [ '$1' ]
host	host: { '$1': '$2' }

Decorators

trigger	completion
@Inject	@Inject($1) $2
@Input	@Input($1) $2
@Output	@Output($1) $2 = $3
@HostBinding	@HostBinding($1) $2
@HostListener	@HostListener('$1', ['$2'])
@ContentChild	@ContentChild($1)
@ContentChildren	@ContentChildren($1)
@ViewChild	@ViewChild($1)
@ViewChildren	@ViewChildren($1)

Lifecycle

trigger	completion
constructor	constructor($1) { $2 }
ngOnChanges	ngOnChanges($1) { $2 }
ngOnInit	ngOnInit($1) { $2 }
ngDoCheck	ngDoCheck($1) { $2 }
ngAfterContentInit	ngAfterContentInit($1) { $2 }
ngAfterContentChecked	ngAfterContentChecked($1) { $2 }
ngAfterViewInit	ngAfterViewInit($1) { $2 }
ngAfterViewChecked	ngAfterViewChecked($1) { $2 }
ngOnDestroy	ngOnDestroy($1) { $2 }

Routing

trigger	completion
@CanActivate	@CanActivate($1)
routerOnActivate	routerOnActivate($1) { $2 }
routerCanReuse	routerCanReuse($1) { $2 }
routerOnReuse	routerOnReuse($1) { $2 }
routerCanDeactivate	routerCanDeactivate($1) { $2 }
routerOnDeactivate	routerOnDeactivate($1) { $2 }

Directives

trigger	completion
ngClass	[ngClass]="$1"
ngIf	*ngIf="$1"
ngIf	[ngIf]="$1"
ngFor	*ngFor="let $1 of $2"
ngForOf	[ngForOf]="$1"
ngStyle	[ngStyle]="$1"
ngSwitch	[ngSwitch]="$1"
ngSwitchDefault	[ngSwitchDefault]="$1"
ngSwitchWhen	[ngSwitchWhen]="$1"
ngModel	[ngModel]="$1"
ngModel	[(ngModel)]="$1"
ngModelChange	(ngModelChange)="$1"

Pipes

trigger	completion