Sublime Text Snippets and Completions for
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
html Typescript support May 19, 2016
snippets
LICENSE
README.md
angular2-html.sublime-completions
angular2-js.sublime-completions

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