Binding
One 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 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() {}
}
|
Pipes
Upper 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 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}}
</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 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' };
}
|
|
