rxjs: final example

book-rating/src/app/books/book-details/book-details.component.html

@@ -1,10 +1,16 @@
-<!-- <h2>{{ isbn() }}</h2> -->
+@if (book(); as b) {
 
-<pre>
-{{ book() | json }}
-</pre>
+  <h2>{{ b.title }}</h2>
+  <p>
+    {{ b.description }}
+  </p>
 
+}
+@else {
+  Waiting for the first book!
+}
 <hr>
 
 <a routerLink="/books/9783864909467">Go to Angular book</a><br>
 <a routerLink="/books/9783864905520">Go to React book</a><br>
+<a routerLink="/books/404">Trigger an Error</a><br>

book-rating/src/app/books/book-details/book-details.component.ts

@@ -1,15 +1,15 @@
-import { JsonPipe } from '@angular/common';
-import { Component, inject, signal } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, RouterLink } from '@angular/router';
-import { concatMap, map, mergeMap, switchMap } from 'rxjs';
+import { catchError, map, of, retry, switchMap } from 'rxjs';
+
 import { BookStoreService } from '../shared/book-store.service';
 
 @Component({
   selector: 'app-book-details',
   imports: [
-    RouterLink,
-    JsonPipe
+    RouterLink
   ],
   templateUrl: './book-details.component.html',
   styleUrl: './book-details.component.scss'
@@ -20,7 +20,16 @@ export class BookDetailsComponent {
 
   book = toSignal(inject(ActivatedRoute).paramMap.pipe(
     map(paramMap => paramMap.get('isbn') || ''),
-    switchMap(isbn => this.bs.getSingle(isbn))
-  ))
+    switchMap(isbn => this.bs.getSingle(isbn).pipe(
+      retry({
+        count: 3,
+        delay: 1000
+      }),
+      catchError((err: HttpErrorResponse) => of({
+        title: 'ERROR',
+        description: err.message
+      }))
+    ))
+  ));
 
 }

book-rating/src/app/books/shared/book-store.service.ts

@@ -15,6 +15,6 @@ export class BookStoreService {
   }
 
   getSingle(isbn: string): Observable<Book> {
-    return this.http.get<Book>(`https://api.angular.schule/books/${isbn}/slow`)
+    return this.http.get<Book>(`https://api.angular.schule/books/${isbn}`)
   }
 }