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' };
} |
|
Help Us Go Positive!
We offset our carbon usage with Ecologi. Click the link below to help us!
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