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
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