/angular2-snippets

Sublime Text Snippets and Completions for

Primary LanguageJavaScriptMIT LicenseMIT

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