70 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			70 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
| /**
 | |
|  * @license
 | |
|  * Copyright Google Inc. All Rights Reserved.
 | |
|  *
 | |
|  * Use of this source code is governed by an MIT-style license that can be
 | |
|  * found in the LICENSE file at https://angular.io/license
 | |
|  */
 | |
| 
 | |
| import {Component} from '@angular/core';
 | |
| import {Observable} from 'rxjs/Observable';
 | |
| import {Subscriber} from 'rxjs/Subscriber';
 | |
| 
 | |
| // #docregion AsyncPipePromise
 | |
| @Component({
 | |
|   selector: 'async-promise-pipe',
 | |
|   template: `<div>
 | |
|     <code>promise|async</code>: 
 | |
|     <button (click)="clicked()">{{ arrived ? 'Reset' : 'Resolve' }}</button>
 | |
|     <span>Wait for it... {{ greeting | async }}</span>
 | |
|   </div>`
 | |
| })
 | |
| export class AsyncPromisePipeComponent {
 | |
|   greeting: Promise<string>|null = null;
 | |
|   arrived: boolean = false;
 | |
| 
 | |
|   private resolve: Function|null = 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;
 | |
|     }
 | |
|   }
 | |
| }
 | |
| // #enddocregion
 | |
| 
 | |
| // #docregion AsyncPipeObservable
 | |
| @Component({
 | |
|   selector: 'async-observable-pipe',
 | |
|   template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>'
 | |
| })
 | |
| export class AsyncObservablePipeComponent {
 | |
|   time = new Observable<string>((observer: Subscriber<string>) => {
 | |
|     setInterval(() => observer.next(new Date().toString()), 1000);
 | |
|   });
 | |
| }
 | |
| // #enddocregion
 | |
| 
 | |
| // For some reason protractor hangs on setInterval. So we will run outside of angular zone so that
 | |
| // protractor will not see us. Also we want to have this outside the docregion so as not to confuse
 | |
| // the reader.
 | |
| function setInterval(fn: Function, delay: number) {
 | |
|   const zone = Zone.current;
 | |
|   let rootZone = zone;
 | |
|   while (rootZone.parent) {
 | |
|     rootZone = rootZone.parent;
 | |
|   }
 | |
|   rootZone.run(
 | |
|       () => { window.setInterval(function() { zone.run(fn, this, arguments as any); }, delay); });
 | |
| }
 |