angular/packages/examples/common/pipes/ts/async_pipe.ts
Shuaib Hasan Akib 7345bdc06b refactor(common): update pipe examples and remove redundant standalone flag (#64135)
Updated pipe examples to explicitly import the pipe for clarity and
correctness. Also removed `standalone: true` since it is now the default
and no longer necessary.

PR Close #64135
2025-09-30 15:31:11 -04:00

78 lines
2 KiB
TypeScript

/**
* @license
* Copyright Google LLC 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.dev/license
*/
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {Observable, Observer} from 'rxjs';
// #docregion AsyncPipePromise
@Component({
selector: 'async-promise-pipe',
imports: [AsyncPipe],
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',
imports: [AsyncPipe],
template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>',
})
export class AsyncObservablePipeComponent {
time = new Observable<string>((observer: Observer<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 = (window as any)['Zone'].current;
let rootZone = zone;
while (rootZone.parent) {
rootZone = rootZone.parent;
}
rootZone.run(() => {
window.setInterval(function (this: unknown) {
zone.run(fn, this, arguments as any);
}, delay);
});
}