ng-ts-snippets

Angular + TypeScript code abbreviations snippets for Atom

Fred Pizarro

562

1

Bug Reports

1.0.0

MIT

GitHub

ng-ts-snippets

Angular + TypeScript code abbreviations snippets for Atom

TypeScript Snippets

Snippet o Abbrev Information
imp_ts import basic init
exp_ts export basic init
ng-c Angular generate Component
ng-rt Angular generate Routes
ng-s Angular generate Service
ng-pipe Angular generate Pipe
ng-d Angular generate Directive

TypeScript personalized

Snippet o Abbrev Information
ng-new-FormGroup Angular Class FormGroup (STABLE)
ng-ng-meth_extractData Angular response object (to .map())
ng-meth_handleError Angular response object (to .catch())

Import personalized

Snippet o Abbrev Information
imp_ts import basic init
imp_ts_m import all modules in the index.module
imp_ts_components import folder-structure for components
imp_ts_c import all components in the index.component
imp_ts_services import folder-structure for services
imp_ts_s import all services in the index.service
imp_ts_interfaces import folder-structure for interfaces
imp_ts_pipes import folder-structure for pipes
imp_ts-all import folder-structure for pipes

Import JS library

Snippet o Abbrev Information
imp_ts-RxJS_map import map observable
imp_ts-RxJS_Observable import observable

Import all Core Angular

Snippet o Abbrev Information
imp_ts-router import router all
imp_ts-forms_tml import Forms (all x Template)
imp_ts-forms_data import Forms (all x Data)
imp_ts-http import (http, headers, options and res)
imp_ts-animations import (trigger, state, style, animate, transition)
imp_ts-ngfire2 import (AngularFire and FirebaseListObservable)

Export personalized

Snippet o Abbrev Information
exp_ts export (basic, default)
exp_ts-class export class
exp_ts-const export const
exp_ts-class_impl export class + Implements
exp_ts-intf export interface

HTML Snippets

Snippet o Abbrev Information
ngIf Directive NgIf
ngFor Directive NgFor (NgForOf)
ngModel Directive NgModel
ngRouterOutlet Directive RouterOutlet (STABLE)
ng-rtLink Directive RouterLink
ng-rtLinkActive Directive RouterLinkActive
ngStyle Directive NgFor
ngClass Directive NgClass
ngSwitch Directive NgSwitch
ng_propty-formGroup_event-submit formGroup event submit
ng-FormControlName Directive FormControlName (STABLE)
ng-FormGroupName Directive FormGroupName (STABLE)
ng-FormArrayName Directive FormArrayName (STABLE)

NOTE:

Use key TAB of the keyboard or Modify text ^^^^^^^^^^ in code generated !!...

imp_ts

imp_ts generating a import basic init.

import { ^^^^^^^^^^ } from '^^^^^^^^^^';

exp_ts

exp_ts Angular export (basic, default)

export { ^^^^^^^^^^ } from '^^^^^^^^^^';

exp_ts-class

exp_ts-class export a class.

export class ^^^^^^^^^^ {

}

exp_ts-class_impl

exp_ts-class_impl export class + implements (methods).

export class ^^^^^^^^^^ implements ^^^^^^^^^^ {

}

exp_ts-const

exp_ts-const export a const.

export const ^^^^^^^^^^ = [
  {

  }
];

ng-c

ng-c generating a Component basic, Note: import + declarations in file module (app.module.ts) or ignore this message.

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

@Component({
  selector: '^^^^^^^^^^',
  templateUrl: './^^^^^^^^^^.component.html',
  styleUrls: ['./^^^^^^^^^^.component.css'],
  animations: [  ]
})
export class ^^^^^^^^^^Component {
  /* Note: import + declarations in file module (~.module.ts) or ignore this message. */
  constructor(  ){  }

}

ng-c_lite

ng-c_lite generating a Component basic, Note: import + declarations in file module (app.module.ts) or ignore this message.

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

@Component({
  selector: '^^^^^^^^^^',
  template: `

  `,
  styles: [ '  ' ],
  animations: [  ]
})
export class ^^^^^^^^^^Component {
  /* Note: import + declarations in file module (~.module.ts) or ignore this message. */
  constructor(  ){  }

}

ng-rt

ng-rt generating a Routing Component basic, Note: add tag in component, import + imports in file module (app.module.ts) he const (app_routing); or ignore this message.

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

import { ^^^^^^^^^^ } from '^^^^^^^^^^';

const NAV_ROUTES: Routes = [
  { path: '^^^^^^^^^^', component: ^^^^^^^^^^ },
  { path: '**', pathMatch:'full', redirectTo: '^^^^^^^^^^' }

];

export const app_routing = RouterModule.forRoot( NAV_ROUTES );
/* Note:
  * add tag <router-outlet></router-outlet> in file component (~.component.html)
  * Need import and imports `app_routing`  in file module (~.module.ts) or ignore this message. */

];

export const app_routing = RouterModule.forRoot( NAV_ROUTES );
/* Note:
  * add tag <router-outlet></router-outlet> in file component (~.component.html)
  * Need import and imports `app_routing`  in file module (~.module.ts) or ignore this message. */

ng-rtRouterOutlet

ng-rtRouterOutlet generating a Directive RouterOutlet (STABLE)

<router-outlet
  (activate)='onActivate($event)'
  (deactivate)='onDeactivate($event)'></router-outlet>

ng-rtLink

ng-rtLink generating a Directive RouterLink in HTML

[routerLink]="['^^^^^^^^^^']"

ng-rtLinkActive

ng-rtLinkActive generating a Directive RouterLinkActive (STABLE), in HTML. Lets you add a CSS class to an element when the link's route becomes active.

routerLinkActive="^^^^^^^^^^"

ng-s

ng-s Angular generate service

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

@Injectable()
export class ^^^^^^^^^^Service {
  /* Note: import + providers in file module (~.module.ts) or ignore this message. */
  constructor(  ){  }

}

ng-pipe

ng-pipe Angular generate pipe

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

@Pipe({
  name: '^^^^^^^^^^'
})
export class ^^^^^^^^^^Pipe implements PipeTransform {
  /* Note: import + declarations in file module (~.module.ts) or ignore this message. */
  constructor(  ){  }

  transform( ^^^^^^^^^^: ^^^^^^^^^^, args: any[] ): ^^^^^^^^^^ {
    return ;
  }

}

ng-d

ng-d Angular generate directive

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

@Directive({ selector: '[^^^^^^^^^^]' })
export class ^^^^^^^^^^Directive {



  constructor(  ){  }

  @Input(  ) set ^^^^^^^^^^ ( ^^^^^^^^^^: boolean ) {

  }

  /* Note: import + declarations in file module (~.module.ts) or ignore this message. */
}

ng-new-FormGroup

ng-new-FormGroup Angular Class FormGroup (STABLE)

const ^^^^^^^^^^ = new FormGroup({
  ^^^^^^^^^^: new FormControl( '^^^^^^^^^^' ),
  ^^^^^^^^^^: new FormControl( '', Validators.^^^^^^^^^^ ),
  ^^^^^^^^^^: new FormArray([
                    new FormControl ( '', Validators.^^^^^^^^^^)
                   ])
});
/* Note: add he FormControlName (the values ${2:^^^^^^^^^^}" and "${4:^^^^^^^^^^}", etc ... ) in tag input (~.component.html)
         add he FormArrayName ( ${6:^^^^^^^^^^}", etc ... ) in a tag what container he tag input (~.component.html) */

ng-meth_extractData

ng-meth_extractData Angular - response object

private extractData(res: Response) {
  let body = res.json();
  return body.data ||  { };
  /* In the above snippet we are transforming response to the json format by doing res.json().
   *? Make no assumptions about the server API. Not all servers return an object with a data property.*/
}

ng-meth_handleError

ng-meth_handleError Angular - error handling

private handleError(error: any) {
  /* In a real world app, we might use a remote logging infrastructure.
   * We'd also dig deeper into the error to get a better message */
  let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
  console.error(errMsg); /*log to console instead*/
  return Promise.reject(errMsg);
  // return Observable.throw(errMsg);
}

imp_ts-router

imp_ts-router Angular import (routes all)

/* routes, Know where the page you are and where you want to move, see the state in which it is, going to say that you can activate that route or not (implements in class)... */
import { Router, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate } from '@angular/router';

imp_ts-forms_tml

imp_ts-forms_tml Angular import Forms (all x Template)

/* Note: Need import and imports FormsModule in file module (~.module.ts) or ignore this message. */
import { NgForm } from '@angular/forms';

imp_ts-forms_data

imp_ts-forms_data Angular import Forms (all x data)

/* Note: Need import and imports FormsModule and ReactiveFormsModule in file module (~.module.ts) or ignore this message. */
import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';

imp_ts-http

imp_ts-http Angular import (http, headers, options and res)

import { Http, Headers, RequestOptions, Response } from '@angular/http'; /* Note: http, headers, options and res work in a service (~.service.ts) or ignore this message. */

imp_ts-animations

imp_ts-animations Angular import (trigger, state, style, animate, transition)

/* Note: Need import and imports BrowserAnimationsModule in file module (~.module.ts) or ignore this message. */
import { trigger, state, style, animate, transition } from '@angular/animations';

imp_ts-ngfire2

imp_ts-ngfire2 Angular import (AngularFire and FirebaseListObservable)

import { AngularFire, FirebaseListObservable } from 'angularfire2';

imp_ts_components

imp_ts_components Angular import (components).

import { ^^^^^^^^^^ } from './components/^^^^^^^^^^.component';

imp_ts_services

imp_ts_services Angular import (services)

import { ^^^^^^^^^^ } from './services/^^^^^^^^^^.service';

exp_ts-intf

imp_ts_interfaces export interface.

export interface ^^^^^^^^^^ {

}

imp_ts_interfaces

imp_ts_interfaces Angular import (interfaces)

import { ^^^^^^^^^^ } from './interfaces/^^^^^^^^^^.interface';

imp_ts_pipes

imp_ts_pipes Angular import (pipes)

import { ^^^^^^^^^^ } from './pipes/^^^^^^^^^^.pipe';

imp_ts_m

imp_ts_m Angular import that exports all of these modules

import { ^^^^^^^^^^ } from '../index.module';

imp_ts_c

imp_ts_c Angular import that exports all of these components

import { ^^^^^^^^^^ } from '../index.component';

imp_ts_s

imp_ts_s Angular import that exports all of these services

import { ^^^^^^^^^^ } from '../index.service';

imp_ts-all

imp_ts-all Angular import (Import an entire module is contents.)

import * as ^^^^^^^^^^ from '^^^^^^^^^^';

imp_ts-RxJS_map

imp_ts-RxJS_map import the map (operator) method is used to extract the JSON content from the response and use it then in the observable processing.

import 'rxjs/add/operator/map'; /*or ( ... rxjs/Rx ); map it to a JSON (_res.json()) */

imp_ts-RxJS_Observable

imp_ts-RxJS_Observable import Observables.

import { Observable } from 'rxjs/Rx'; /* or ( ... rxjs/Observable ) */

ngFor

ngFor Directive NgFor (NgForOf): index (current loop) and first, last, even, odd (boolean value indicating whether the item)

*ngFor="let ^^^^^^^^^^ of ^^^^^^^^^^; let i = index"

ngIf

ngIf Directive NgIf (STABLE)

*ngIf="^^^^^^^^^^"

ngModel

ngModel Directive NgModel (STABLE)

[(ngModel)]="^^^^^^^^^^"

ngStyle

ngStyle Directive NgStyle

[ngStyle]="{ \'^^^^^^^^^^\' :^^^^^^^^^^ }"

ngClass

ngClass Directive NgClass (STABLE)

[ngClass]="{ \'^^^^^^^^^^\' :^^^^^^^^^^ }"

ngSwitch

ngSwitch Directive NgSwitch (STABLE)

<div [ngSwitch]="^^^^^^^^^^" >
  <div *ngSwitchCase="\'^^^^^^^^^^\'" > ^^^^^^^^^^ </div>
  <div *ngSwitchCase="\'^^^^^^^^^^\'" > ^^^^^^^^^^ </div>
  <div *ngSwitchDefault > ^^^^^^^^^^ </div>
</div>

ng_pfes

ng_propty-formGroup_event-submit [formGroup]="name of the object FormGroup" ang (ngSubmit)="var or function/method"

   [formGroup]="^^^^^^^^^^" (ngSubmit)="^^^^^^^^^^"

ng-FormControlName

ng-FormControlName Directive FormControlName (STABLE)

  formControlName="^^^^^^^^^^"

ng-FormGroupName

ng-FormGroupName FormGroupName (STABLE)

  formGroupName="^^^^^^^^^^"

ng-FormArrayName

ng-FormArrayName FormArrayName (STABLE)

  formArrayName="^^^^^^^^^^"

Contact

More contributions and suggestions in the theme to:

Copyright © 2017-2018 MIT License by Fred Pizarro.

Enjoy!