49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
// #docregion
|
|
import { Component, OnInit } from '@angular/core';
|
|
|
|
import { Observable, of } from 'rxjs';
|
|
import { catchError, startWith } from 'rxjs/operators';
|
|
|
|
import { TwainService } from './twain.service';
|
|
|
|
// #docregion component
|
|
@Component({
|
|
selector: 'twain-quote',
|
|
// #docregion template
|
|
template: `
|
|
<p class="twain"><i>{{quote | async}}</i></p>
|
|
<button (click)="getQuote()">Next quote</button>
|
|
<p class="error" *ngIf="errorMessage">{{ errorMessage }}</p>`,
|
|
// #enddocregion template
|
|
styles: [
|
|
`.twain { font-style: italic; } .error { color: red; }`
|
|
]
|
|
|
|
})
|
|
export class TwainComponent implements OnInit {
|
|
errorMessage: string;
|
|
quote: Observable<string>;
|
|
|
|
constructor(private twainService: TwainService) {}
|
|
|
|
ngOnInit(): void {
|
|
this.getQuote();
|
|
}
|
|
|
|
// #docregion get-quote
|
|
getQuote() {
|
|
this.errorMessage = '';
|
|
this.quote = this.twainService.getQuote().pipe(
|
|
startWith('...'),
|
|
catchError( (err: any) => {
|
|
// Wait a turn because errorMessage already set once this turn
|
|
setTimeout(() => this.errorMessage = err.message || err.toString());
|
|
return of('...'); // reset message to placeholder
|
|
})
|
|
);
|
|
// #enddocregion get-quote
|
|
}
|
|
|
|
}
|
|
// #enddocregion component
|