Sublime Text Snippets and Completions for
JavaScript

README.md

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:

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