AsyncPipe

export class AsyncPipe

exported from angular2/common defined in angular2/src/common/pipes/async_pipe.ts (line 35)

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes.

Example

This example binds a Promise to the view. Clicking the Resolve button resolves the promise.

@Component({ selector: 'async-example', template: `<div> <p>Wait for it... {{ greeting | async }}</p> <button (click)="clicked()">{{ arrived ? 'Reset' : 'Resolve' }}</button> </div>` }) export class AsyncPipeExample { greeting: Promise<string> = null; arrived: boolean = false; private resolve: Function = null; constructor() { this.reset(); } reset() { this.arrived = false; this.greeting = new Promise<string>((resolve, reject) => { this.resolve = resolve; }); } clicked() { if (this.arrived) { this.reset(); } else { this.resolve("hi there!"); this.arrived = true; } } }

It's also possible to use async with Observables. The example below binds the time Observable to the view. Every 500ms, the time Observable updates the view with the current time.

Annotations

@Pipe({name: 'async', pure: false})


@Injectable()

Constructor

constructor(_ref: ChangeDetectorRef)

Not Yet Documented

Members

ngOnDestroy() : void

Not Yet Documented

transform(obj: Observable<any>| Promise<any>| EventEmitter<any>, args?: any[]) : any

Not Yet Documented