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 out of 5 stars based on 15 ratings

Favourited By

charaf ess catchatpas Ester 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

          C# Naming Conventions Cheat Sheet
          Gremlin Cheat Sheet
          NUnit Cheat Sheet