Scribd
Upload
38 views

Angular 2 Cheat Sheet: by Via

This Angular 2 cheat sheet provides concise summaries of core Angular concepts like data binding, structural directives, lifecycle hooks, components, templates, and services. It explains how to bind data to templates, use directives like ngIf and ngFor to conditionally display parts of the template, tap into component lifecycle events, define inline and linked templates, and create and consume reusable services. The cheat sheet is a helpful two-page reference guide for Angular fundamentals.

Uploaded by

Sreeni Reddy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
38 views

Angular 2 Cheat Sheet: by Via

This Angular 2 cheat sheet provides concise summaries of core Angular concepts like data binding, structural directives, lifecycle hooks, components, templates, and services. It explains how to bind data to templates, use directives like ngIf and ngFor to conditionally display parts of the template, tap into component lifecycle events, define inline and linked templates, and create and consume reusable services. The cheat sheet is a helpful two-page reference guide for Angular fundamentals.

Uploaded by

Sreeni Reddy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Angular 2 Cheat Sheet

by Greg Finzer (GregFinzer) via cheatography.com/15280/cs/10781/

Binding Pipes

One Way Binding <h1>{{pageTitle}}</h1> Upper Case <p>{{customer.name | uppercase}}</p>

Two Way Binding <input [(ngModel)]="customer.FirstName"> Lower Case <p>{{customer.name | lowercase}}</p>

Property Binding <img [src]="customer.imageUrl"> Date <p>{{orderDate | date:'medium'}}</p>

Attribute Binding <button [attr.aria-label]="ok">Ok</button> Date Format <p>{{orderDate | date:'yMMMd''}}</p>

Class Binding <div [class.Selected]="Selected">Selected</div> Currency <p>{{price | currency}}</p>

ngClass <div [ngClass]="setClasses()"> Percent <p>{{taxes | percent:'1.1-1'}}</p>


{{customer.name}} Number <p>value | number:'1.1-2'}}</p>
</div>
JSON Debugging <pre>{{Customer | json}}</pre>
Style Binding <button [style.color]="isSelected ? 'red' : 'white'">

ngStyle <div [ngStyle]="setStyles()">


{{customer.name}}
</div>

Component <customer-detail [customer]="currentCustomer">


Binding <customer-detail>

Directive Binding <div [ngClass] = "{selected:


isSelected}">Customer</div>

Event Binding <button (click)="save()">Save</button>

$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() {}
}

AfterViewInit export class Customer implements AfterViewInit {


ngAfterViewInit() {}
}

OnDestroy export class Customer implements OnDestroy {


ngOnDestroy() {}
}

By Greg Finzer (GregFinzer) Published 6th February, 2017. Sponsored by CrosswordCheats.com


cheatography.com/gregfinzer/ Last updated 9th February, 2017. Learn to solve cryptic crosswords!
www.kellermansoftware.com Page 1 of 2. http://crosswordcheats.com
Angular 2 Cheat Sheet
by Greg Finzer (GregFinzer) via cheatography.com/15280/cs/10781/

Component with Inline Template Service (cont)

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


@Component({
moduleId: module.id, Injecting a Service
selector: 'customer',
//Example: customer-list.component.ts
template: `
export class CustomerListComponent {
<h3>{{customer.name}}</h3>
customers: Customer[];
`

})
constructor(private customerService:
export class CustomerComponent {
CustomerService) { }
customer = { id: 100, name: 'John Smith' };
}
}

Component Linked Template


Structural Directives
import { Component } from '@angular/core';
*ngIf <div *ngIf="currentCustomer">
@Component({
Selected {{currentCustomer.Name}}
moduleId: module.id,
</div>
selector: 'customer',
*ngFor <ul>
templateUrl: 'customer.component.html',
<li *ngFor="let customer of customers">
{{ customer.name }} styleUrls: ['customer.component.css']

</li> })
</ul> export class CustomerComponent {

*ngSwitch <div [ngSwitch]="orderStatus"> customer = { id: 100, name: 'John Smith' };


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

By Greg Finzer (GregFinzer) Published 6th February, 2017. Sponsored by CrosswordCheats.com


cheatography.com/gregfinzer/ Last updated 9th February, 2017. Learn to solve cryptic crosswords!
www.kellermansoftware.com Page 2 of 2. http://crosswordcheats.com

You might also like