Angular 2 TypeScript Snippets for Atom

This extension for Atom adds snippets for Angular 2 for TypeScript and HTML.

Installation

Atom Package: https://atom.io/packages/angular-2-typescript-snippets

apm install angular-2-typeScript-snippets

Or Settings/Preferences ➔ Packages ➔ Search for angular-2-typeScript-snippets

Usage

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

TypeScript Snippets

snippet	explanation
ng2-bootstrap	bootstrap a module
ng2-module	create a module
ng2-component	create a component
ng2-input	create an input property
ng2-output	create an output event
ng2-directive	create a directive
ng2-pipe	create a pipe
ng2-routes	setup routes
ng2-route-path	configure single
ng2-service	create a service
ng2-subscribe	subscribe to an observable
ng2-rx-map	import map-operator

HTML Snippets

snippet
ng2-ngClass
ng2-ngFor
ng2-ngIf
ng2-ngModel
ng2-property
ng2-event
ng2-routerLink
ng2-ngStyle
ng2-ngSwitch

Alternatively, press Ctrl+Space (Windows, Linux) or Cmd+Space (OSX) to activate snippets from within the editor.

Known Issues

It seems that you need to have a tsconfig.json to get the TypeScript snippets to work.

Snippets in Detail

No one wants to buy a pig in a poke. The following section will show you what the provided snippets actually do for you.

ng2-bootstrap

ng2-bootstrap allows you to start your root module to get your app up and running. It also prepares enableProdMode() for you.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { <module-name> } from './<path-to-module>.module';

//enableProdMode(); //Uncomment for production
platformBrowserDynamic().bootstrapModule(<module-name>);

ng2-module

ng2-module provides a skeleton for an Angular 2 module.

import { NgModule } from '@angular/core';

@NgModule({
  imports: [<Modules>],
  declarations: [<Components>, <Directives>],
  providers: [<Services>]
})
export class <ModuleName> { }

ng2-component

ng2-component provides a skeleton for an Angular 2 Component. It saves you time typing the mandatory Decorator properties.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: '<selector>',
  templateUrl: '<component-name>.component.html',
})
export class <ComponentName>Component implements OnInit {
  constructor() {  }

  ngOnInit() {}
}

ng2-input

ng2-input is a handy snippet to add an input property to a component class.

@Input() <peroperty>: <type>;

ng2-output

ng2-outputgenerates a output event in a component class.

@Output() <event>: EventEmitter<type> = new EventEmitter();

ng2-import

ng2-import gives you a shorthand writing import-statements.

import {<Module or Component>} from '<path to component>';

ng2-directive

ng2-directive provides a skeleton for an Angular 2 Attribute or Structural Directive.

import { Directive, Input } from '@angular/core';

@Directive({ selector: '[<selector>]' })
export class [DirectiveName]Directive { }

ng2-pipe

ng2-pipe provides a skeleton for an Angular 2 Pipe.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: '<pipe-name>'
})
export class <PipeName>Pipe implements PipeTransform {
  transform(value: <value-type>, args: any[]) : <value-type> {
    return ;
  }
}

ng2-routes

ng2-routes creates the @Routes decorator with a single route in it.

import { RouterModule, Routes } from '@angular/router';

const app_routes: Routes = [
  { path: '<url-segment>', component: <component-name> },
  { path: '**', pathMatch: 'full', redirectTo: '<url-segment>' }
];

export const app_routing = RouterModule.forRoot(app_routes);

ng2-route-path

ng2-route-path adds a single route to @Routes. Use this snippet inside the @Routes decorator.

{ path: '/<route>', component: <component-name> }

ng2-service

ng2-service provides a skeleton for an Angular 2 Service.

import { Injectable } from '@angular/core';

@Injectable()
export class <service-name>Service {
  constructor() {  }
}

ng2-subscribe

ng2-subscribe gives you a shorthand to call a service function, that returns a observable. The subscribe method is also created for you. So you can assign the response quickly.

this.<service-name>.<service-function>
    .subscribe(<response> => this.<assign-target> = <response>});

ng2-rx-map

ng2-rx-map simply creates the import statement to reference the map operator of RxJs.

import 'rxjs/add/operator/map';

ng2-ngClass

This snippet inserts the ngClass directive.

<div [ngClass]="cssClass: expression"></div>

ng2-ngFor

This snippet inserts the ngFor directive.

<div *ngFor="let {1:$item} of list"></div>

ng2-ngIf

This snippet inserts the ngIf directive.

<div *ngIf="expression"></div>

ng2-ngModel

This snippet inserts the ngModel directive.

<div [(ngModel)]="binding"></div>

ng2-property

This snippet inserts the skeleton for a property binding directive.

<div [property]="value"></div>

ng2-event

This snippet inserts the skeleton for a event binding directive.

<div (event)="callback()"></div>

ng2-routerLink

This snippet inserts the routerLink directive.

<a [routerLink]="routeName"></a>

ng2-ngStyle

This snippet inserts the ngStyle directive.

<div [ngStyle]="'style': expression"></div>

ng2-ngSwitch

This snippet inserts the ngSwitch directive.

<div [ngSwitch]="conditionExpression">
  <div *ngSwitchCase="expression">output</div>
  <div *ngSwitchDefault>output2</div>
</div>