├── LICENSE
├── README.md
├── angular2-html.sublime-completions
├── angular2-js.sublime-completions
├── html
    ├── ngclass-binding.sublime-snippet
    ├── ngclass-star.sublime-snippet
    ├── ngfor-star.sublime-snippet
    ├── ngforof-binding.sublime-snippet
    ├── ngif-binding.sublime-snippet
    ├── ngif-star.sublime-snippet
    ├── ngmodel-2way.sublime-snippet
    ├── ngmodel-binding.sublime-snippet
    ├── ngmodelchange-event.sublime-snippet
    ├── ngstyle-binding.sublime-snippet
    ├── ngswitch-binding.sublime-snippet
    ├── ngswitchdefault-binding.sublime-snippet
    └── ngswitchwhen-binding.sublime-snippet
└── snippets
    ├── component-basic.sublime-snippet
    ├── component-complex.sublime-snippet
    ├── component-external.sublime-snippet
    ├── component.sublime-snippet
    ├── directive-basic.sublime-snippet
    ├── directive-complex.sublime-snippet
    ├── directive.sublime-snippet
    ├── pipe-es6.sublime-snippet
    ├── pipe.sublime-snippet
    ├── route-data.sublime-snippet
    ├── route-default.sublime-snippet
    ├── route-param.sublime-snippet
    ├── route-parent.sublime-snippet
    ├── route-redirect.sublime-snippet
    ├── route-wildcard.sublime-snippet
    ├── route.sublime-snippet
    ├── routeconfig-basic.sublime-snippet
    ├── routeconfig.sublime-snippet
    └── service.sublime-snippet


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Evan Plaice <evanplaice@gmail.com>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining
 6 | a copy of this software and associated documentation files (the
 7 | 'Software'), to deal in the Software without restriction, including
 8 | without limitation the rights to use, copy, modify, merge, publish,
 9 | distribute, sublicense, and/or sell copies of the Software, and to
10 | permit persons to whom the Software is furnished to do so, subject to
11 | the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be
14 | included in all copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
20 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
21 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
22 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Angular2 Snippets for Sublime Text
  2 | 
  3 | 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.
  4 | 
  5 | ## Installation
  6 | 
  7 | **Package Control**
  8 | 
  9 | **Notice: submission to package control is still pending so 'Manual' install is the only option at this time.**
 10 | 
 11 | - open the `Command Palette` (⌘ + ⇧ + p | SUPER + SHIFT + p)
 12 | - select `Package Control: Install Package` (p + i)
 13 | - select `Angular2 Snippets`
 14 | 
 15 | **Manual**
 16 | 
 17 | - copy/clone the files into your Sublime Text User Preferences folder
 18 | 
 19 | **Config**
 20 | 
 21 | - to enable auto-completion add the following to `User.sublime-preferences`
 22 | 
 23 |   ```json
 24 |   "auto_complete_triggers": [ {"selector": "text.html", "characters": "<"}, {"selector": "text.html meta.tag", "characters": " " } ]
 25 |   ```
 26 | 
 27 | ## Directory
 28 | 
 29 | **Snippet Categories:**
 30 | 
 31 | - [Component](#component)
 32 | - [Directive](#directive)
 33 | - [Service](#service)
 34 | - [Pipe](#pipe)
 35 | - [RouteConfig](#routeconfig)
 36 | - [Route](#route)
 37 | - [Test](#test)
 38 | 
 39 | **Completion Categories:**
 40 | 
 41 | - [Annotations](#annotations)
 42 | - [Decorators](#decorators)
 43 | - [Lifecycle](#lifecycle)
 44 | - [Routing](#routing)
 45 | - [Directives](#directives)
 46 | - [Attributes](#attributes)
 47 | - [Pipes](#pipes)
 48 | 
 49 | ## Snippets
 50 | 
 51 | ### Component
 52 | 
 53 | **Trigger:** `component`
 54 | 
 55 | <table>
 56 |   <tr>
 57 |     <th>description</th>
 58 |     <th>completion</th>
 59 |   </tr>
 60 |   <tr>
 61 |     <td>@Component</td>
 62 |     <td><pre style="padding:0; margin:0;"><code>
 63 | @Component(${2})
 64 | export class ${1}Component {${3}}
 65 |     </code></pre></td>
 66 |   </tr>
 67 |   <tr>
 68 |     <td>@Component (Basic)</td>
 69 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
 70 | @Component({
 71 |   selector: '${2}',
 72 |   template: '${3}',
 73 |   styles: '${4}'
 74 | })
 75 | export class ${1}Component {${5}}
 76 |     </code></pre></td>
 77 |   </tr>
 78 |   <tr>
 79 |     <td>@Component (External)</td>
 80 |     <td><pre style="padding:0; margin:0;"><code>
 81 | @Component({
 82 |   selector: '${2}',
 83 |   templateUrl: '${3}',
 84 |   styleUrls: ['${4}']
 85 | })
 86 | export class ${1}Component {${5}}
 87 |     </code></pre></td>
 88 |   </tr>
 89 |   <tr>
 90 |     <td>@Component (Complex)</td>
 91 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
 92 | @Component({
 93 |   selector: '${2}',
 94 |   providers: ['${3}'],
 95 |   viewProviders: ['${4}'],
 96 |   template: '${5}',
 97 |   templateUrl: '${6}',
 98 |   styles: '${7}',
 99 |   styleUrls: ['${8}'],
100 |   directives: ['${9}'],
101 |   pipes: ['${10}']
102 | })
103 | export class ${1}Component {${11}}
104 |     </code></pre></td>
105 |   </tr>
106 | </table>
107 | 
108 | ### Directive
109 | 
110 | **Trigger:** `directive`
111 | 
112 | <table>
113 |   <tr>
114 |     <th>description</th>
115 |     <th>completion</th>
116 |   </tr>
117 |   <tr>
118 |     <td>@Directive</td>
119 |     <td><pre style="padding:0; margin:0;"><code>
120 | @Directive({${2}})
121 | export class ${1}Directive {${3}}
122 |     </code></pre></td>
123 |   </tr>
124 |   <tr>
125 |     <td>@Directive (Basic)</td>
126 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
127 | @Directive({
128 |   selector: '${2}'
129 | })
130 | export class ${1}Directive {${3}}
131 |     </code></pre></td>
132 |   </tr>
133 |   <tr>
134 |     <td>@Directive (Complex)</td>
135 |     <td><pre style="padding:0; margin:0;"><code>
136 | @Directive({
137 |   selector: '${2}',
138 |   providers: ['${3}'],
139 |   properties: ['${4}'],
140 |   host: {'${5}'}
141 | })
142 | export class ${1}Directive {${6}}
143 |     </code></pre></td>
144 |   </tr>
145 | </table>
146 | 
147 | ### Service
148 | 
149 | **Trigger:** `service`
150 | 
151 | <table>
152 |   <tr>
153 |     <th>description</th>
154 |     <th>completion</th>
155 |   </tr>
156 |   <tr>
157 |     <td>Service</td>
158 |     <td><pre style="padding:0; margin:0;"><code>
159 | @Injectable()
160 | export class ${1}Service {${2}}
161 |     </code></pre></td>
162 |   </tr>
163 | </table>
164 | 
165 | ### Pipe
166 | 
167 | **Trigger:** `pipe`
168 | 
169 | <table>
170 |   <tr>
171 |     <th>description</th>
172 |     <th>completion</th>
173 |   </tr>
174 |   <tr>
175 |     <td>Pipe</td>
176 |     <td><pre style="padding:0; margin:0;"><code>
177 | @Pipe({ name: '${2}' })
178 | export class ${1}Pipe implements PipeTransform {
179 |   transform (value:number, args:${3:any}[]) : ${4:any} {${5}}
180 | }
181 |     </code></pre></td>
182 |   </tr>
183 |   <tr>
184 |     <td>Pipe (ES6)</td>
185 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
186 | @Pipe({ name: '${2}' })
187 | export class ${1}Pipe {
188 |   transform (value, args) {${3}}
189 | }
190 |     </code></pre></td>
191 |   </tr>
192 | </table>
193 | 
194 | ### RouteConfig
195 | 
196 | **Trigger:** `routeconfig`
197 | 
198 | <table>
199 |   <tr>
200 |     <th>description</th>
201 |     <th>completion</th>
202 |   </tr>
203 |   <tr>
204 |     <td>@RouteConfig</td>
205 |     <td><pre style="padding:0; margin:0;"><code>
206 | @RouteConfig([
207 |   ${1}
208 | ])
209 |     </code></pre></td>
210 |   </tr>
211 |   <tr>
212 |     <td>@RouteConfig (Basic)</td>
213 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
214 | @RouteConfig([
215 |   {
216 |     path: '/${1}',
217 |     name: '${2}',
218 |     component: ${2}Component,
219 |     useAsDefault: true
220 |   }${3}
221 | ]
222 |     </code></pre></td>
223 |   </tr>
224 | </table>
225 | 
226 | ### Route
227 | 
228 | **Trigger:** `route`
229 | 
230 | <table>
231 |   <tr>
232 |     <th>description</th>
233 |     <th>completion</th>
234 |   </tr>
235 |   <tr>
236 |     <td>Route</td>
237 |     <td><pre style="padding:0; margin:0;"><code>
238 | {
239 |   path: '/${1}',
240 |   name: '${2}',
241 |   component: ${2}Component
242 | }${3}
243 |     </code></pre></td>
244 |   </tr>
245 |   <tr>
246 |     <td>Route (Default)</td>
247 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
248 | {
249 |   path: '/${1}',
250 |   name: '${2}',
251 |   component: ${2}Component,
252 |   useAsDefault: true
253 | }${3}
254 |     </code></pre></td>
255 |   </tr>
256 |   <tr>
257 |     <td>Route (Redirect)</td>
258 |     <td><pre style="padding:0; margin:0;"><code>
259 | {
260 |   path: '/${1:**}',
261 |   redirectTo: ['${2}']
262 | }${3}
263 |     </code></pre></td>
264 |   </tr>
265 |   <tr>
266 |     <td>Route (Param)</td>
267 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
268 | {
269 |   path: '/${1}:${2}',
270 |   name: '${3}',
271 |   component: ${3}Component
272 | }${4}
273 |     </code></pre></td>
274 |   </tr>
275 |   <tr>
276 |     <td>Route (Wildcard)</td>
277 |     <td><pre style="padding:0; margin:0;"><code>
278 | {
279 |   path: '/${1}*${2}',
280 |   name: '${3}',
281 |   component: ${3}Component
282 | }${4}
283 |     </code></pre></td>
284 |   </tr>
285 |   <tr>
286 |     <td>Route (Data)</td>
287 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
288 | {
289 |   path: '/${1}',
290 |   name: '${2}',
291 |   component: ${2}Component,
292 |   data: {${3}: ${4}}
293 | }${5}
294 |     </code></pre></td>
295 |   </tr>
296 |   <tr>
297 |     <td>Route (Parent)</td>
298 |     <td><pre style="padding:0; margin:0;"><code>
299 | {
300 |   path: '/${1}...',
301 |   name: '${2}',
302 |   component: ${2}Component
303 | }${3}
304 |     </code></pre></td>
305 |   </tr>
306 | </table>
307 | 
308 | ### Test
309 | 
310 | <table>
311 |   <tr>
312 |     <th>description</th>
313 |     <th>completion</th>
314 |   </tr>
315 | </table>
316 | 
317 | ## Completions
318 | 
319 | ### Annotations
320 | 
321 | <table>
322 |   <tr>
323 |     <th>trigger</th>
324 |     <th>completion</th>
325 |   </tr>
326 |   <tr>
327 |     <td>selector</td>
328 |     <td><pre style="padding:0; margin:0;"><code>
329 | selector: '$1'
330 |     </code></pre></td>
331 |   </tr>
332 |   <tr>
333 |     <td>inputs</td>
334 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
335 | inputs: [
336 |   '$1'
337 | ]
338 |     </code></pre></td>
339 |   </tr>
340 |   <tr>
341 |     <td>outputs</td>
342 |     <td><pre style="padding:0; margin:0;"><code>
343 | outputs: [
344 |   '$1'
345 | ]
346 |     </code></pre></td>
347 |   </tr>
348 |   <tr>
349 |     <td>providers</td>
350 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
351 | providers: [
352 |   $1
353 | ]
354 |     </code></pre></td>
355 |   </tr>
356 |   <tr>
357 |     <td>viewProviders</td>
358 |     <td><pre style="padding:0; margin:0;"><code>
359 | viewProviders: [
360 |   $1
361 | ]
362 |     </code></pre></td>
363 |   </tr>
364 |   <tr>
365 |     <td>template</td>
366 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
367 | template: `
368 | $1
369 | `
370 |     </code></pre></td>
371 |   </tr>
372 |   <tr>
373 |     <td>templateUrl</td>
374 |     <td><pre style="padding:0; margin:0;"><code>
375 | templateUrl: '$1'
376 |     </code></pre></td>
377 |   </tr>
378 |   <tr>
379 |     <td>styles</td>
380 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
381 | styles: `
382 | $1
383 | `
384 |     </code></pre></td>
385 |   </tr>
386 |   <tr>
387 |     <td>styleUrls</td>
388 |     <td><pre style="padding:0; margin:0;"><code>
389 | styleUrls: [
390 |   '$1'
391 | ]
392 |     </code></pre></td>
393 |   </tr>
394 |   <tr>
395 |     <td>directives</td>
396 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
397 | directives: [
398 |   $1
399 | ]
400 |     </code></pre></td>
401 |   </tr>
402 |   <tr>
403 |     <td>pipes</td>
404 |     <td><pre style="padding:0; margin:0;"><code>
405 | pipes: [
406 |   $1
407 | ]
408 |     </code></pre></td>
409 |   </tr>
410 |   <tr>
411 |     <td>properties</td>
412 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
413 | properties: [
414 |   '$1'
415 | ]
416 |     </code></pre></td>
417 |   </tr>
418 |   <tr>
419 |     <td>host</td>
420 |     <td><pre style="padding:0; margin:0;"><code>
421 | host: {
422 |   '$1': '$2'
423 | }
424 |     </code></pre></td>
425 |   </tr>
426 | </table>
427 | 
428 | ### Decorators
429 | 
430 | <table>
431 |   <tr>
432 |     <th>trigger</th>
433 |     <th>completion</th>
434 |   </tr>
435 |   <tr>
436 |     <td>@Inject</td>
437 |     <td><pre style="padding:0; margin:0;"><code>
438 | @Inject($1) $2
439 |     </code></pre></td>
440 |   </tr>
441 |   <tr>
442 |     <td>@Input</td>
443 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
444 | @Input($1) $2
445 |     </code></pre></td>
446 |   </tr>
447 |   <tr>
448 |     <td>@Output</td>
449 |     <td><pre style="padding:0; margin:0;"><code>
450 | @Output($1) $2 = $3
451 |     </code></pre></td>
452 |   </tr>
453 |   <tr>
454 |     <td>@HostBinding</td>
455 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
456 | @HostBinding($1) $2
457 |     </code></pre></td>
458 |   </tr>
459 |   <tr>
460 |     <td>@HostListener</td>
461 |     <td><pre style="padding:0; margin:0;"><code>
462 | @HostListener('$1', ['$2'])
463 |     </code></pre></td>
464 |   </tr>
465 |   <tr>
466 |     <td>@ContentChild</td>
467 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
468 | @ContentChild($1)
469 |     </code></pre></td>
470 |   </tr>
471 |   <tr>
472 |     <td>@ContentChildren</td>
473 |     <td><pre style="padding:0; margin:0;"><code>
474 | @ContentChildren($1)
475 |     </code></pre></td>
476 |   </tr>
477 |   <tr>
478 |     <td>@ViewChild</td>
479 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
480 | @ViewChild($1)
481 |     </code></pre></td>
482 |   </tr>
483 |   <tr>
484 |     <td>@ViewChildren</td>
485 |     <td><pre style="padding:0; margin:0;"><code>
486 | @ViewChildren($1)
487 |     </code></pre></td>
488 |   </tr>
489 | </table>
490 | 
491 | ### Lifecycle
492 | 
493 | <table>
494 |   <tr>
495 |     <th>trigger</th>
496 |     <th>completion</th>
497 |   </tr>
498 |   <tr>
499 |     <td>constructor</td>
500 |     <td><pre style="padding:0; margin:0;"><code>
501 | constructor($1) {
502 |   $2
503 | }
504 |     </code></pre></td>
505 |   </tr>
506 |   <tr>
507 |     <td>ngOnChanges</td>
508 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
509 | ngOnChanges($1) {
510 |   $2
511 | }
512 |     </code></pre></td>
513 |   </tr>
514 |   <tr>
515 |     <td>ngOnInit</td>
516 |     <td><pre style="padding:0; margin:0;"><code>
517 | ngOnInit($1) {
518 |   $2
519 | }
520 |     </code></pre></td>
521 |   </tr>
522 |   <tr>
523 |     <td>ngDoCheck</td>
524 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
525 | ngDoCheck($1) {
526 |   $2
527 | }
528 |     </code></pre></td>
529 |   </tr>
530 |   <tr>
531 |     <td>ngAfterContentInit</td>
532 |     <td><pre style="padding:0; margin:0;"><code>
533 | ngAfterContentInit($1) {
534 |   $2
535 | }
536 |     </code></pre></td>
537 |   </tr>
538 |   <tr>
539 |     <td>ngAfterContentChecked</td>
540 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
541 | ngAfterContentChecked($1) {
542 |   $2
543 | }
544 |     </code></pre></td>
545 |   </tr>
546 |   <tr>
547 |     <td>ngAfterViewInit</td>
548 |     <td><pre style="padding:0; margin:0;"><code>
549 | ngAfterViewInit($1) {
550 |   $2
551 | }
552 |     </code></pre></td>
553 |   </tr>
554 |   <tr>
555 |     <td>ngAfterViewChecked</td>
556 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
557 | ngAfterViewChecked($1) {
558 |   $2
559 | }
560 |     </code></pre></td>
561 |   </tr>
562 |   <tr>
563 |     <td>ngOnDestroy</td>
564 |     <td><pre style="padding:0; margin:0;"><code>
565 | ngOnDestroy($1) {
566 |   $2
567 | }
568 |     </code></pre></td>
569 |   </tr>
570 | </table>
571 | 
572 | ### Routing
573 | 
574 | <table>
575 |   <tr>
576 |     <th>trigger</th>
577 |     <th>completion</th>
578 |   </tr>
579 |   <tr>
580 |     <td>@CanActivate</td>
581 |     <td><pre style="padding:0; margin:0;"><code>
582 | @CanActivate($1)
583 |     </code></pre></td>
584 |   </tr>
585 |   <tr>
586 |     <td>routerOnActivate</td>
587 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
588 | routerOnActivate($1) {
589 |   $2
590 | }
591 |     </code></pre></td>
592 |   </tr>
593 |   <tr>
594 |     <td>routerCanReuse</td>
595 |     <td><pre style="padding:0; margin:0;"><code>
596 | routerCanReuse($1) {
597 |   $2
598 | }
599 |     </code></pre></td>
600 |   </tr>
601 |   <tr>
602 |     <td>routerOnReuse</td>
603 |     <td><pre style="padding:0; margin:0; background-color: #fff;"><code>
604 | routerOnReuse($1) {
605 |   $2
606 | }
607 |     </code></pre></td>
608 |   </tr>
609 |   <tr>
610 |     <td>routerCanDeactivate</td>
611 |     <td><pre style="padding:0; margin:0;"><code>
612 | routerCanDeactivate($1) {
613 |   $2
614 | }
615 |     </code></pre></td>
616 |   </tr>
617 |   <tr>
618 |     <td>routerOnDeactivate</td>
619 |     <td><pre style="padding:0; margin:0;"><code>
620 | routerOnDeactivate($1) {
621 |   $2
622 | }
623 |     </code></pre></td>
624 |   </tr>
625 | </table>
626 | 
627 | ### Directives
628 | 
629 | <table>
630 |   <tr>
631 |     <th>trigger</th>
632 |     <th>completion</th>
633 |   </tr>
634 |   <tr>
635 |     <td>ngClass</td>
636 |     <td><code><pre>[ngClass]="$1"</pre></code></td>
637 |   </tr>
638 |   <tr>
639 |     <td>ngIf</td>
640 |     <td><code><pre>*ngIf="$1"</pre></code></td>
641 |   </tr>
642 |   <tr>
643 |     <td>ngIf</td>
644 |     <td><code><pre>[ngIf]="$1"</pre></code></td>
645 |   </tr>
646 |   <tr>
647 |     <td>ngFor</td>
648 |     <td><code><pre>*ngFor="let $1 of $2"</pre></code></td>
649 |   </tr>
650 |   <tr>
651 |     <td>ngForOf</td>
652 |     <td><code><pre>[ngForOf]="$1"</pre></code></td>
653 |   </tr>
654 |   <tr>
655 |     <td>ngStyle</td>
656 |     <td><code><pre>[ngStyle]="$1"</pre></code></td>
657 |   </tr>
658 |   <tr>
659 |     <td>ngSwitch</td>
660 |     <td><code><pre>[ngSwitch]="$1"</pre></code></td>
661 |   </tr>
662 |   <tr>
663 |     <td>ngSwitchDefault</td>
664 |     <td><code><pre>[ngSwitchDefault]="$1"</pre></code></td>
665 |   </tr>
666 |   <tr>
667 |     <td>ngSwitchWhen</td>
668 |     <td><code><pre>[ngSwitchWhen]="$1"</pre></code></td>
669 |   </tr>
670 |   <tr>
671 |     <td>ngModel</td>
672 |     <td><code><pre>[ngModel]="$1"</pre></code></td>
673 |   </tr>
674 |   <tr>
675 |     <td>ngModel</td>
676 |     <td><code><pre>[(ngModel)]="$1"</pre></code></td>
677 |   </tr>
678 |   <tr>
679 |     <td>ngModelChange</td>
680 |     <td><code><pre>(ngModelChange)="$1"</pre></code></td>
681 |   </tr>
682 | </table>
683 | 
684 | ### Pipes
685 | 
686 | <table>
687 |   <tr>
688 |     <th>trigger</th>
689 |     <th>completion</th>
690 |   </tr>
691 | </table>
692 | 


--------------------------------------------------------------------------------
/angular2-html.sublime-completions:
--------------------------------------------------------------------------------
 1 | {
 2 |   "scope": "text.html meta.tag",
 3 | 
 4 |   "completions":
 5 |   [
 6 |     // Note: HTML completions don't currently work due to an outstanding bug in ST3.
 7 |     //  Snippets are used instead.
 8 | 
 9 |     // Directives
10 |         // NgClass
11 |         // NgIf
12 |         // NgFor
13 |         // NgForOf
14 |         // NgStyle
15 |         // NgSwitch
16 |         // NgSwitchDefault
17 |         // NgSwitchWhen
18 |         // NgModel
19 |         // NgModelChange
20 |         // NgForm
21 | 
22 |     // Pipes
23 |         // async
24 |         // currency
25 |         // date
26 |         // decimal
27 |         // json
28 |         // lowercase
29 |         // number
30 |         // percent
31 |         // slice
32 |         // uppercase
33 |   ]
34 | }
35 | 


--------------------------------------------------------------------------------
/angular2-js.sublime-completions:
--------------------------------------------------------------------------------
 1 | {
 2 |   "scope": "source.js, source.ts",
 3 | 
 4 |   "completions":
 5 |   [
 6 |     // Annotations
 7 |     { "trigger": "selector", "contents": "selector: '$1'" },
 8 |     { "trigger": "inputs", "contents": "inputs: [\n  '$1'\n]" },
 9 |     { "trigger": "outputs", "contents": "outputs: [\n  '$1'\n]" },
10 |     { "trigger": "providers", "contents": "providers: [\n  $1\n]" },
11 |     { "trigger": "viewProviders", "contents": "viewProviders: [\n  $1\n]" },
12 |     { "trigger": "template", "contents": "template: `\n$1\n`" },
13 |     { "trigger": "templateUrl", "contents": "templateUrl: '$1'" },
14 |     { "trigger": "styles", "contents": "styles: `\n$1\n`" },
15 |     { "trigger": "styleUrls", "contents": "styleUrls: [\n  '$1'\n]" },
16 |     { "trigger": "directives", "contents": "directives: [\n  $1\n]" },
17 |     { "trigger": "pipes", "contents": "pipes: [\n  $1\n]" },
18 |     { "trigger": "properties", "contents": "properties: [\n  '$1'\n]" },
19 |     { "trigger": "host", "contents": "host: {\n  '$1': '$2'\n}" },
20 | 
21 |     // Decorators
22 |     { "trigger": "@Inject", "contents": "@Inject($1) $2" },
23 |     { "trigger": "@Input", "contents": "@Input($1) $2" },
24 |     { "trigger": "@Output", "contents": "@Output($1) $2 = $3" },
25 |     { "trigger": "@HostBinding", "contents": "@HostBinding($1) $2" },
26 |     { "trigger": "@HostListener", "contents": "@HostListener('$1', ['$2'])" },
27 |     { "trigger": "@ContentChild", "contents": "@ContentChild($1)" },
28 |     { "trigger": "@ContentChildren", "contents": "@ContentChildren($1)" },
29 |     { "trigger": "@ViewChild", "contents": "@ViewChild($1)" },
30 |     { "trigger": "@ViewChildren", "contents": "@ViewChildren($1)" },
31 | 
32 |     // Lifecycle
33 |     { "trigger": "constructor", "contents": "constructor($1) {\n  $2\n}" },
34 |     { "trigger": "ngOnChanges", "contents": "ngOnChanges($1) {\n  $2\n}" },
35 |     { "trigger": "ngOnInit", "contents": "ngOnInit($1) {\n  $2\n}" },
36 |     { "trigger": "ngDoCheck", "contents": "ngDoCheck($1) {\n  $2\n}" },
37 |     { "trigger": "ngAfterContentInit", "contents": "ngAfterContentInit($1) {\n  $2\n}" },
38 |     { "trigger": "ngAfterContentChecked", "contents": "ngAfterContentChecked($1) {\n  $2\n}" },
39 |     { "trigger": "ngAfterViewInit", "contents": "ngAfterViewInit($1) {\n  $2\n}" },
40 |     { "trigger": "ngAfterViewChecked", "contents": "ngAfterViewChecked($1) {\n  $2\n}" },
41 |     { "trigger": "ngOnDestroy", "contents": "ngOnDestroy($1) {\n  $2\n}" },
42 | 
43 |     // Routing
44 |     { "trigger": "@CanActivate", "contents": "@CanActivate($1)" },
45 |     { "trigger": "routerOnActivate", "contents": "routerOnActivate($1) {\n  $2\n}" },
46 |     { "trigger": "routerCanReuse", "contents": "routerCanReuse($1) {\n  $2\n}" },
47 |     { "trigger": "routerOnReuse", "contents": "routerOnReuse($1) {\n  $2\n}" },
48 |     { "trigger": "routerCanDeactivate", "contents": "routerCanDeactivate($1) {\n  $2\n}" },
49 |     { "trigger": "routerOnDeactivate", "contents": "routerOnDeactivate($1) {\n  $2\n}" }
50 |   ]
51 | }
52 | 


--------------------------------------------------------------------------------
/html/ngclass-binding.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[[ngClass]="$1"]]></content>
3 |   <tabTrigger>ngClass</tabTrigger>
4 |   <scope>text.html, source.js, source.ts</scope>
5 |   <description>[] - Angular2</description>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/html/ngclass-star.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[*ngClass="$1"]]></content>
3 |   <tabTrigger>*ngClass</tabTrigger>
4 |   <scope>text.html, source.js, source.ts</scope>
5 |   <description>* - Angular2</description>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/html/ngfor-star.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[*ngFor="let $1 of $2"]]></content>
3 |   <tabTrigger>ngFor</tabTrigger>
4 |   <scope>text.html, source.js, source.ts</scope>
5 |   <description>* - Angular2</description>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/html/ngforof-binding.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[[ngForOf]="$1"]]></content>
3 |   <tabTrigger>ngForOf</tabTrigger>
4 |   <scope>text.html, source.js, source.ts</scope>
5 |   <description>[] - Angular2</description>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/html/ngif-binding.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[[ngIf]="$1"]]></content>
3 |   <tabTrigger>ngIf</tabTrigger>
4 |   <scope>text.html, source.js, source.ts</scope>
5 |   <description>[] - Angular2</description>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/html/ngif-star.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[*ngIf="$1"]]></content>
3 |   <tabTrigger>ngIf</tabTrigger>
4 |   <scope>text.html, source.js, source.ts</scope>
5 |   <description>* - Angular2</description>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/html/ngmodel-2way.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[[(ngModel)]="$1"]]></content>
3 |   <tabTrigger>ngModel</tabTrigger>
4 |   <scope>text.html, source.js, source.ts</scope>
5 |   <description>[()] - Angular2</description>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/html/ngmodel-binding.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[[ngModel]="$1"]]></content>
3 |   <tabTrigger>ngModel</tabTrigger>
4 |   <scope>text.html, source.js, source.ts</scope>
5 |   <description>[] - Angular2</description>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/html/ngmodelchange-event.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[[ngModelChange]="$1"]]></content>
3 |   <tabTrigger>ngModelChange</tabTrigger>
4 |   <scope>text.html, source.js, source.ts</scope>
5 |   <description>() - Angular2</description>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/html/ngstyle-binding.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[[ngStyle]="$1"]]></content>
3 |   <tabTrigger>ngStyle</tabTrigger>
4 |   <scope>text.html, source.js, source.ts</scope>
5 |   <description>[] - Angular2</description>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/html/ngswitch-binding.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[[ngSwitch]="$1"]]></content>
3 |   <tabTrigger>ngSwitch</tabTrigger>
4 |   <scope>text.html, source.js, source.ts</scope>
5 |   <description>[] - Angular2</description>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/html/ngswitchdefault-binding.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[[ngSwitchDefault]="$1"]]></content>
3 |   <tabTrigger>ngSwitchDefault</tabTrigger>
4 |   <scope>text.html, source.js, source.ts</scope>
5 |   <description>[] - Angular2</description>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/html/ngswitchwhen-binding.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[[ngSwitchWhen]="$1"]]></content>
3 |   <tabTrigger>ngSwitchWhen</tabTrigger>
4 |   <scope>text.html, source.js, source.ts</scope>
5 |   <description>[] - Angular2</description>
6 | </snippet>
7 | 


--------------------------------------------------------------------------------
/snippets/component-basic.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | @Component({
 4 |   selector: '$2',
 5 |   template: '$3',
 6 |   styles: '$4'
 7 | })
 8 | export class $1Component {$5}
 9 | ]]></content>
10 |   <tabTrigger>component</tabTrigger>
11 |   <scope>source.js, source.ts</scope>
12 |   <description>@Component (Basic) - Angular2</description>
13 | </snippet>
14 | 


--------------------------------------------------------------------------------
/snippets/component-complex.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | @Component({
 4 |   selector: '$2',
 5 |   providers: ['$3'],
 6 |   viewProviders: ['$4'],
 7 |   template: '$5',
 8 |   templateUrl: '$6',
 9 |   styles: '$7',
10 |   styleUrls: ['$8'],
11 |   directives: ['$9'],
12 |   pipes: ['$10']
13 | })
14 | export class $1Component {$11}
15 | ]]></content>
16 |   <tabTrigger>component</tabTrigger>
17 |   <scope>source.js, source.ts</scope>
18 |   <description>@Component (Complex) - Angular2</description>
19 | </snippet>
20 | 


--------------------------------------------------------------------------------
/snippets/component-external.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | @Component({
 4 |   selector: '$2',
 5 |   templateUrl: '$3',
 6 |   styleUrls: ['$4']
 7 | })
 8 | export class $1Component {$5}
 9 | ]]></content>
10 |   <tabTrigger>component</tabTrigger>
11 |   <scope>source.js, source.ts</scope>
12 |   <description>@Component (External) - Angular2</description>
13 | </snippet>
14 | 


--------------------------------------------------------------------------------
/snippets/component.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | @Component({$2})
 4 | export class $1Component {$3}
 5 | ]]></content>
 6 |   <tabTrigger>component</tabTrigger>
 7 |   <scope>source.js, source.ts</scope>
 8 |   <description>@Component - Angular2</description>
 9 | </snippet>
10 | 


--------------------------------------------------------------------------------
/snippets/directive-basic.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | @Directive({
 4 |   selector: '$2'
 5 | })
 6 | export class $1Directive {$3}
 7 | ]]></content>
 8 |   <tabTrigger>directive</tabTrigger>
 9 |   <scope>source.js, source.ts</scope>
10 |   <description>@Directive (Basic) - Angular2</description>
11 | </snippet>
12 | 


--------------------------------------------------------------------------------
/snippets/directive-complex.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | @Directive({
 4 |   selector: '$2',
 5 |   providers: ['$3'],
 6 |   properties: ['$4'],
 7 |   host: {'$5'}
 8 | })
 9 | export class $1Directive {$6}
10 | ]]></content>
11 |   <tabTrigger>directive</tabTrigger>
12 |   <scope>source.js, source.ts</scope>
13 |   <description>@Directive (Complex) - Angular2</description>
14 | </snippet>
15 | 


--------------------------------------------------------------------------------
/snippets/directive.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | @Directive({$2})
 4 | export class $1Directive {$3}
 5 | ]]></content>
 6 |   <tabTrigger>directive</tabTrigger>
 7 |   <scope>source.js, source.ts</scope>
 8 |   <description>@Directive - Angular2</description>
 9 | </snippet>
10 | 


--------------------------------------------------------------------------------
/snippets/pipe-es6.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | @Pipe({ name: '$2' })
 4 | export class $1Pipe {
 5 |   transform (value, args) {$3}
 6 | }
 7 | ]]></content>
 8 |   <tabTrigger>pipe</tabTrigger>
 9 |   <scope>source.js, source.ts</scope>
10 |   <description>Pipe (ES6)</description>
11 | </snippet>
12 | 


--------------------------------------------------------------------------------
/snippets/pipe.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | @Pipe({ name: '$2' })
 4 | export class $1Pipe implements PipeTransform {
 5 |   transform (value:number, args:${3:any}[]) : ${4:any} {$5}
 6 | }
 7 | ]]></content>
 8 |   <tabTrigger>pipe</tabTrigger>
 9 |   <scope>source.js, source.ts</scope>
10 |   <description>Pipe</description>
11 | </snippet>
12 | 


--------------------------------------------------------------------------------
/snippets/route-data.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | {
 4 |   path: '/$1',
 5 |   name: '$2',
 6 |   component: $2Component,
 7 |   data: {$3: $4}
 8 | }$5
 9 | ]]></content>
10 |   <tabTrigger>route</tabTrigger>
11 |   <scope>source.js, source.ts</scope>
12 |   <description>Route (Data)</description>
13 | </snippet>
14 | 


--------------------------------------------------------------------------------
/snippets/route-default.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | {
 4 |   path: '/$1',
 5 |   name: '$2',
 6 |   component: $2Component,
 7 |   useAsDefault: true
 8 | }$3
 9 | ]]></content>
10 |   <tabTrigger>route</tabTrigger>
11 |   <scope>source.js, source.ts</scope>
12 |   <description>Route (Default)</description>
13 | </snippet>
14 | 


--------------------------------------------------------------------------------
/snippets/route-param.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | {
 4 |   path: '/$1:$2',
 5 |   name: '$3',
 6 |   component: $3Component
 7 | }$4
 8 | ]]></content>
 9 |   <tabTrigger>route</tabTrigger>
10 |   <scope>source.js, source.ts</scope>
11 |   <description>Route (Param)</description>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------
/snippets/route-parent.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | {
 4 |   path: '/$1...',
 5 |   name: '$2',
 6 |   component: $2Component
 7 | }$3
 8 | ]]></content>
 9 |   <tabTrigger>route</tabTrigger>
10 |   <scope>source.js, source.ts</scope>
11 |   <description>Route (Parent)</description>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------
/snippets/route-redirect.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | {
 4 |   path: '/${1:**}',
 5 |   redirectTo: ['$2']
 6 | }$3
 7 | ]]></content>
 8 |   <tabTrigger>route</tabTrigger>
 9 |   <scope>source.js, source.ts</scope>
10 |   <description>Route (Redirect)</description>
11 | </snippet>
12 | 


--------------------------------------------------------------------------------
/snippets/route-wildcard.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | {
 4 |   path: '/$1*$2',
 5 |   name: '$3',
 6 |   component: $3Component
 7 | }$4
 8 | ]]></content>
 9 |   <tabTrigger>route</tabTrigger>
10 |   <scope>source.js, source.ts</scope>
11 |   <description>Route (Wildcard)</description>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------
/snippets/route.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | {
 4 |   path: '/$1',
 5 |   name: '$2',
 6 |   component: $2Component
 7 | }$3
 8 | ]]></content>
 9 |   <tabTrigger>route</tabTrigger>
10 |   <scope>source.js, source.ts</scope>
11 |   <description>Route</description>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------
/snippets/routeconfig-basic.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | @RouteConfig([
 4 |   {
 5 |     path: '/$1',
 6 |     name: '$2',
 7 |     component: $2Component,
 8 |     useAsDefault: true
 9 |   }$3
10 | ]]]></content>
11 |   <tabTrigger>routeconfig</tabTrigger>
12 |   <scope>source.js, source.ts</scope>
13 |   <description>@RouteConfig (Basic)</description>
14 | </snippet>
15 | 


--------------------------------------------------------------------------------
/snippets/routeconfig.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | @RouteConfig([
 4 |   $1
 5 | ])
 6 | ]]></content>
 7 |   <tabTrigger>routeconfig</tabTrigger>
 8 |   <scope>source.js, source.ts</scope>
 9 |   <description>@RouteConfig</description>
10 | </snippet>
11 | 


--------------------------------------------------------------------------------
/snippets/service.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | @Injectable()
4 | export class $1Service {$2}
5 | ]]></content>
6 |   <tabTrigger>service</tabTrigger>
7 |   <scope>source.js, source.ts</scope>
8 |   <description>Service - Angular2</description>
9 | </snippet>


--------------------------------------------------------------------------------