4 done

src/app/components/show-details/show-details.component.html

@@ -1,6 +1,6 @@
 @if (detailShow$ | async; as detailShow) {
   <div class="card">
-    <img class="card-img-top img-fluid" ngSrc="{{detailShow.image}}">
+    <img class="card-img-top img-fluid" src="{{detailShow.image}}">
     <div class="card-body">
       <h4 class="card-title">{{ detailShow.title }}</h4>
       <p class="card-text" [innerHTML]="detailShow.summary"></p></div>

src/app/components/show-details/show-details.component.ts

@@ -1,14 +1,13 @@
 import {Component, Input} from '@angular/core';
 import {BehaviorSubject} from 'rxjs';
 import {Show} from '../../model/show';
-import {AsyncPipe, NgOptimizedImage} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 
 @Component({
   selector: 'app-show-details',
   standalone: true,
   imports: [
-    AsyncPipe,
-    NgOptimizedImage
+    AsyncPipe
   ],
   templateUrl: './show-details.component.html',
   styleUrl: './show-details.component.css'

src/app/services/api-service.ts

@@ -1,7 +1,7 @@
 import {inject, Injectable} from '@angular/core';
 import {Show} from '../model/show';
 import {HttpClient} from '@angular/common/http';
-import {map, Observable} from 'rxjs';
+import {catchError, map, Observable, throwError} from 'rxjs';
 import {ShowDTO} from '../model/ShowDto';
 
 @Injectable({
@@ -15,10 +15,20 @@ export class ApiService {
     const apiUrl = `${this.baseUrl}/singlesearch/shows?q=${title}`;
     let show: Show = new Show(0, title);
 
-    return this.httpClient.get<ShowDTO>(apiUrl).pipe(map((s) => {
-      show.summary = s.summary;
-      show.image = s.image?.medium;
-      return show;
-    }));
+    return this.httpClient.get<ShowDTO>(apiUrl).pipe(
+      catchError(err => {
+        let errorMessage;
+        if (err.status == 404) {
+          errorMessage = "Eine Serie mit diesem Titel konnte nicht gefunden werden.";
+        } else {
+          errorMessage = err.message();
+        }
+        return throwError(() => console.log(errorMessage));
+      }),
+      map((s) => {
+        show.summary = s.summary;
+        show.image = s.image?.medium;
+        return show;
+      }));
   }
 }