Cheatography
https://cheatography.com
Angular 2 Quick Reference
BindingOne Way Binding | <h1>{{pageTitle}}</h1> | Two Way Binding | <input [(ngModel)]="customer.FirstName"> | Property Binding | <img [src]="customer.imageUrl"> | Attribute Binding | <button [attr.aria-label]="ok">Ok</button> | Class Binding | <div [class.Selected]="Selected">Selected</div> | ngClass | <div [ngClass]="setClasses()">
{{customer.name}}
</div> | Style Binding | <button [style.color]="isSelected ? 'red' : 'white'"> | ngStyle | <div [ngStyle]="setStyles()">
{{customer.name}}
</div> | Component Binding | <customer-detail [customer]="currentCustomer">
<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 HooksOnInit | 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() {}
} |
PipesUpper Case | <p>{{customer.name | uppercase}}</p> | Lower Case | <p>{{customer.name | lowercase}}</p> | Date | <p>{{orderDate | date:'medium'}}</p> | Date Format | <p>{{orderDate | date:'yMMMd''}}</p> | Currency | <p>{{price | currency}}</p> | Percent | <p>{{taxes | percent:'1.1-1'}}</p> | Number | <p>value | number:'1.1-2'}}</p> | JSON Debugging | <pre>{{Customer | json}}</pre> |
Component with Inline Templateimport { 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}}
</div> | *ngFor | <ul>
<li *ngFor="let customer of customers">
{{ customer.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 Templateimport { 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' };
} |
|
Created By
www.kellermansoftware.com
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets
More Cheat Sheets by GregFinzer