Angular + TypeScript code abbreviations snippets for Atom
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 |
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()) |
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 |
Snippet o Abbrev | Information |
---|---|
imp_ts-RxJS_map | import map observable |
imp_ts-RxJS_Observable | import observable |
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) |
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 |
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) |
Use key TAB of the keyboard or Modify text ^^^^^^^^^^ in code generated !!...
imp_ts
generating a import basic init.
import { ^^^^^^^^^^ } from '^^^^^^^^^^';
exp_ts
Angular export (basic, default)
export { ^^^^^^^^^^ } from '^^^^^^^^^^';
exp_ts-class
export a class.
export class ^^^^^^^^^^ {
}
exp_ts-class_impl
export class + implements (methods).
export class ^^^^^^^^^^ implements ^^^^^^^^^^ {
}
exp_ts-const
export a const.
export const ^^^^^^^^^^ = [
{
}
];
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
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
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
generating a Directive RouterOutlet (STABLE)
<router-outlet
(activate)='onActivate($event)'
(deactivate)='onDeactivate($event)'></router-outlet>
ng-rtLink
generating a Directive RouterLink in HTML
[routerLink]="['^^^^^^^^^^']"
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
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
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
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
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
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
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
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
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
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
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
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
Angular import (AngularFire and FirebaseListObservable)
import { AngularFire, FirebaseListObservable } from 'angularfire2';
imp_ts_components
Angular import (components).
import { ^^^^^^^^^^ } from './components/^^^^^^^^^^.component';
imp_ts_services
Angular import (services)
import { ^^^^^^^^^^ } from './services/^^^^^^^^^^.service';
imp_ts_interfaces
export interface.
export interface ^^^^^^^^^^ {
}
imp_ts_interfaces
Angular import (interfaces)
import { ^^^^^^^^^^ } from './interfaces/^^^^^^^^^^.interface';
imp_ts_pipes
Angular import (pipes)
import { ^^^^^^^^^^ } from './pipes/^^^^^^^^^^.pipe';
imp_ts_m
Angular import that exports all of these modules
import { ^^^^^^^^^^ } from '../index.module';
imp_ts_c
Angular import that exports all of these components
import { ^^^^^^^^^^ } from '../index.component';
imp_ts_s
Angular import that exports all of these services
import { ^^^^^^^^^^ } from '../index.service';
imp_ts-all
Angular import (Import an entire module is contents.)
import * as ^^^^^^^^^^ from '^^^^^^^^^^';
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
import Observables.
import { Observable } from 'rxjs/Rx'; /* or ( ... rxjs/Observable ) */
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
Directive NgIf (STABLE)
*ngIf="^^^^^^^^^^"
ngModel
Directive NgModel (STABLE)
[(ngModel)]="^^^^^^^^^^"
ngStyle
Directive NgStyle
[ngStyle]="{ \'^^^^^^^^^^\' :^^^^^^^^^^ }"
ngClass
Directive NgClass (STABLE)
[ngClass]="{ \'^^^^^^^^^^\' :^^^^^^^^^^ }"
ngSwitch
Directive NgSwitch (STABLE)
<div [ngSwitch]="^^^^^^^^^^" >
<div *ngSwitchCase="\'^^^^^^^^^^\'" > ^^^^^^^^^^ </div>
<div *ngSwitchCase="\'^^^^^^^^^^\'" > ^^^^^^^^^^ </div>
<div *ngSwitchDefault > ^^^^^^^^^^ </div>
</div>
ng_propty-formGroup_event-submit
[formGroup]="name of the object FormGroup" ang (ngSubmit)="var or function/method"
[formGroup]="^^^^^^^^^^" (ngSubmit)="^^^^^^^^^^"
ng-FormControlName
Directive FormControlName (STABLE)
formControlName="^^^^^^^^^^"
ng-FormGroupName
FormGroupName (STABLE)
formGroupName="^^^^^^^^^^"
ng-FormArrayName
FormArrayName (STABLE)
formArrayName="^^^^^^^^^^"
More contributions and suggestions in the theme to:
- E-mail: Freddy_ps_3@hotmail.com
- Twitter: https://twitter.com/Fred_Pizarro
Copyright © 2017-2018 MIT License by Fred Pizarro.
Enjoy!