Show Menu
Cheatography

Angular 2 Quick Reference

Binding

One Way Binding
<h1>{{pageTitle}}</h1>
Two Way Binding
<input [(ngMo­del­)]=­"­cus­tom­er.F­ir­stN­ame­">
Property Binding
<img [src]=­"­cus­tom­er.i­ma­geU­rl">
Attribute Binding
<button [attr.a­ri­a-l­abe­l]=­"­ok">­Ok<­/bu­tto­n>
Class Binding
<div [class.Se­lec­ted­]="S­ele­cte­d">S­ele­cte­d</­div>
ngClass
<div [ngClass]="setClasses()">
  {{customer.name}}
</div>
Style Binding
<button [style.co­lor­]="i­sSe­lected ? 'red' : 'white­'">
ngStyle
<div [ngStyle]="setStyles()">
  {{customer.name}}
</div>
Component Binding
<cu­sto­mer­-detail [customer]="currentCustomer">
<customer-detail>
Directive Binding
<div [ngClass] = "­{se­lected: isSele­cte­d}">­Cus­tom­er<­/di­v>
Event Binding
<button (click­)="s­ave­()">­Sav­e</­but­ton>
$event
<input [value]="customer.name"
 (input)="customer.name=$event.target.value">

Lifecycle Hooks

OnInit
export class Customer implements OnInit {
  ngOnInit() {}
}
OnChanges
export class Customer implements OnChanges {
  ngOnChanges() {}
}
AfterV­iewInit
export class Customer implements AfterV­iewInit {
  ngAfterViewInit() {}
}
OnDestroy
export class Customer implements OnDestroy {
  ngOnDestroy() {}
}

Pipes

Upper Case
<p>{{customer.name | upperc­ase­}}<­/p>
Lower Case
<p>{{customer.name | lowerc­ase­}}<­/p>
Date
<p>{{orderDate | date:'­med­ium­'}}­</p>
Date Format
<p>{{orderDate | date:'­yMM­Md'­'}}­</p>
Currency
<p>{{price | curren­cy}­}</­p>
Percent
<p>{{taxes | percen­t:'­1.1­-1'­}}<­/p>
Number
<p>­value | number­:'1.1-­2'}­}</­p>
JSON Debugging
<pre>{{Customer | json}}­</p­re>

Component with Inline Template

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

@Component({
  moduleId: module.id,
  selector: 'customer',
  template: `
    <h3>{{customer.name}}</h3>
  `
})

export class CustomerComponent {
  customer = { id: 100, name: 'John Smith' };
}
 

Structural Directives

*ngIf
<div *ngIf="currentCustomer">
  Selected {{currentCustomer.Name}}
</d­iv>
*ngFor
<ul>
  <li *ngFor­="let customer of customers">
    {{ custom­er.name }}
  </li>
</ul>
*ngSwitch
<div [ngSwitch]="orderStatus">
  <template [ngSwitchCase]="purchased"></template>
  <template [ngSwitchCase]="shipped"></template>
  <template [ngSwitchDefault]></template>
</div>

Service

//Example: customer.service.ts
import { HttpModule } from '@angular/http'

@Injectable()
export class CustomerService {
  constructor(private http: Http) { }

  getCustomers() {
    return this.http.get('api/customers')
      .map((response: Response) => <Customer[]>response.json().data)
      .catch(this.handleError);
  }

  private handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Service error');
  }
}

Injecting a Service

//Example: customer-list.component.ts
export class CustomerListComponent {
  customers: Customer[];
  
  constructor(private customerService: CustomerService) { }
}

Component Linked Template

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

@Component({
  moduleId: module.id,
  selector: 'customer',
  templateUrl: 'customer.component.html',
  styleUrls: ['customer.component.css']
})

export class CustomerComponent {
  customer = { id: 100, name: 'John Smith' };
}
               
 

Metadata

  • Languages:
  • Published: 6th February, 2017
  • Last Updated: 9th February, 2017
  • Rated: 5 stars based on 14 ratings

Favourited By

catchatpas Ester tunc270 Lavysh sk5050 simonvane mattsterp rossT xdecarlos Whatsuup daniel.schliemann

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          JavaScript Cheat Sheet
          CoffeeScript language Cheat Sheet

          More Cheat Sheets by GregFinzer

          Yarn Package Manager Cheat Sheet
          C# Naming Conventions Cheat Sheet
          RhinoMocks Cheat Sheet