Angular2 Snippets for Sublime Text

May 19, 2016 · View on GitHub

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:

Completion Categories:

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