Angular TypeScript Snippets for NetBeans

Now Updated for Angular 4.3.0 release

Biggest change

Now I use camelCase, because NetBeans has a problem when you type a-. The code completion will disappear. So this will not happen with camelCase.

Now I use a or aNg and rx as a prefix, to be faster while typing.

It is based on the Visual Studio Code implementation: https://github.com/johnpapa/vscode-angular2-snippets This extension for NetBeans adds snippets for Angular for TypeScript and HTML.

TypeScript (old screenshot)

HTML (old screenshot)

Usage

Type part of a snippet, press enter or tab, and the snippet unfolds.

TypeScript Angular Snippets

1. aComponent - component
2. aComponentInline - component with inline template
3. aComponentRoot - root app component
4. aDirective - directive
5. aGuardCanActive - CanActivate guard
6. aGuardCanActiveChild - CanActivateChild guard
7. aGuardCanDeactivate - CanDeactivate guard
8. aHttpGet - http.get with Rx Observable
9. aHttpclientGet - httpClient.get with Rx Observable
10. aHttpInterceptor - Empty Angular HttpInterceptor for HttpClient
11. aHttpInterceptorHeaders - Angular HttpInterceptor that sets headers for HttpClient
12. aHttpInterceptorLogging - Angular HttpInterceptor that logs traffic for HttpClient
13. aModule - module
14. aModuleRoot - root app module
15. aModuleRouting - routing module file (forChild)
16. aOutputEvent - @Output event and emitter
17. aPipe - pipe
18. aRoutePath404 - 404 route path
19. aRoutePathDefault - default route path
20. aRoutePathEager - eager route path
21. aRoutePathLazy - lazy route path
22. aRouterEvents - listen to one or more router events
23. aService - service
24. aServiceHttp - service with Http
25. aServiceHttpclient - service with HttpClient
26. aCtorSkipSelf - angular NgModule's skipself constructor
27. aSubscribe - Rx Observable subscription
28. aResolver - resolver

TypeScript RxJS Snippets

1. rxObservable - Rx Observable import
2. rxSubject - Rx Subject import
3. rxReplaySubject - Rx ReplaySubject import
4. rxBehaviorSubject - Rx BehaviorSubject import
5. rxAddOperator - Rx add operator import
6. rxAddObservable - Rx add observable import

HTML Snippets

1. aClass - [class] binding
2. aNgClass - ngClass
3. aNgContainer - <ng-container> element
4. aNgContent - <ng-content> element
5. aNgFor - *ngFor
6. aNgForAsync - *ngFor with async
7. aNgForTrackBy - *ngFor with trackBy
8. aNgIf - *ngIf
9. aNgIfElse - *ngIf with else
10. aNgModel - ngModel
11. aNgStyle - ngStyle
12. aNgSwitch - ngSwitch
13. aNgTemplate - <ng-template> element
14. aPrej - show the JSON form of a model
15. aPreja - show the JSON form of a model, using async
16. aRouterLink - routerLink
17. aRouterLinkParam - routerLink with a route parameter
18. aSelect - <select> control
19. aStyle - [style] binding

How to install

Install the plugin.

Test it into a TypeScript or HTML file (Examples: typescript shortcut aPipe + TAB => import { Pipe, PipeTransform..., html shortcut aNgSwitch + TAB => <div [ngSwitch]=...", ...)

Known Bugs

HTML code completion doesn't include the code templates, but the code templates are working well. A Ticket was created: https://netbeans.org/bugzilla/show_bug.cgi?id=250321