Show Menu

Angular 2 Cheat Sheet by

Angular 2 Quick Reference
development     programming     javascript     web     angular2

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' };
}

Download the Angular 2 Cheat Sheet

2 Pages
//media.cheatography.com/storage/thumb/gregfinzer_angular-2.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

Like this cheat sheet? Check out our sponsors!

Readable.io is a collection of tools to make your writing better. More readable content means higher conversion rates and better reader engagement. Measure website and document readability, measure keyword density and more!

Click Here To Get Started!

 

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
          MSTest Cheat Sheet