40 lines
883 B
TypeScript
40 lines
883 B
TypeScript
// #docregion
|
|
import { Component } from '@angular/core';
|
|
|
|
import { Observable, interval } from 'rxjs';
|
|
import { map, take } from 'rxjs/operators';
|
|
|
|
@Component({
|
|
selector: 'app-hero-message',
|
|
template: `
|
|
<h2>Async Hero Message and AsyncPipe</h2>
|
|
<p>Message: {{ message$ | async }}</p>
|
|
<button (click)="resend()">Resend</button>`,
|
|
})
|
|
export class HeroAsyncMessageComponent {
|
|
message$: Observable<string>;
|
|
|
|
private messages = [
|
|
'You are my hero!',
|
|
'You are the best hero!',
|
|
'Will you be my hero?'
|
|
];
|
|
|
|
constructor() { this.resend(); }
|
|
|
|
resend() {
|
|
this.message$ = interval(500).pipe(
|
|
map(i => this.messages[i]),
|
|
take(this.messages.length)
|
|
);
|
|
}
|
|
}
|
|
// #enddocregion
|
|
|
|
// Alternative message$ formula:
|
|
// this.message$ = fromArray(this.messages).pipe(
|
|
// map(message => timer(500),
|
|
// map(() => message)),
|
|
// concatAll()
|
|
// );
|