load comic details

kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.html

@@ -4,7 +4,11 @@
     </div>
     <div class="child">
         <div class="float-details-element">
+          @if (comic()) {
+            <h2>{{ comic().title }}</h2>
+          } @else {
             <h2>Comic Details</h2>
+          }
         </div>
     </div>
 </div>

kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.ts

@@ -1,5 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, inject, input } from '@angular/core';
 import { ComicComicsListComponent } from "../comic-comics-list/comic-comics-list.component";
+import { ComicDetails } from './comic.model';
+import { ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot } from '@angular/router';
+import { ComicService } from './comic.service';
 
 @Component({
   selector: 'app-comic-comics',
@@ -8,5 +11,13 @@ import { ComicComicsListComponent } from "../comic-comics-list/comic-comics-list
   styleUrl: './comic-comics.component.css'
 })
 export class ComicComicsComponent {
-
+  comic = input.required<ComicDetails>();
 }
+
+export const comicResolver: ResolveFn<ComicDetails> = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+  const comicService = inject(ComicService);
+  const comicId = route.paramMap.get('comicId');
+  const comicDetails = comicService.loadComicDetails(comicId);
+  console.log(comicDetails);
+  return comicDetails;
+};

kontor-angular/src/app/kontor/comic/comic-comics/comic.model.ts

@@ -3,3 +3,20 @@ export interface Comic {
   title: string;
   completed: boolean;
 }
+
+export interface ComicWork {
+  worktype: string;
+
+}
+export interface ComicDetails {
+  id: string;
+  created: string;
+  title: string;
+  completed: boolean;
+  current_order: boolean;
+  weblink: string;
+  publisher: string;
+  volumes: [
+    name: string,
+  ];
+}

kontor-angular/src/app/kontor/comic/comic-comics/comic.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from "@angular/common/http";
 import { inject, Injectable, signal } from "@angular/core";
-import { Comic } from "./comic.model";
+import { Comic, ComicDetails } from "./comic.model";
 import { catchError, map, throwError } from "rxjs";
 
 @Injectable({
@@ -16,6 +16,23 @@ export class ComicService {
     return this.fetchComics('http://127.0.0.1:8800/api/comics/comics', 'Someting went wrong fetching comics. Please try again later.');
   }
 
+  loadComicDetails(comicId: string | null) {
+    return this.fetchComicDetails('http://127.0.0.1:8800/api/comics/comics/' + comicId, 'Someting went wrong fetching comics. Please try again later.');
+  }
+
+  private fetchComicDetails(url: string, errorMessage: string) {
+    return this.httpClient.get<ComicDetails>(url).pipe(
+      map((resData) => {
+        console.log(resData);
+        return resData;
+      }),
+      catchError((error) => {
+        console.log(error);
+        return throwError(() => new Error(errorMessage));
+      })
+    );
+  }
+
   private fetchComics(url: string, errorMessage: string) {
     return this.httpClient.get<Comic[]>(url).pipe(
       map((resData) => resData),

kontor-angular/src/app/kontor/comic/comic-section/comic-section.routes.ts

@@ -1,7 +1,7 @@
 import { Routes } from "@angular/router";
 import { ComicArtistsComponent } from "../comic-artists/comic-artists.component";
 import { ComicPublishersComponent } from './../comic-publishers/comic-publishers.component';
-import { ComicComicsComponent } from "../comic-comics/comic-comics.component";
+import { ComicComicsComponent, comicResolver } from "../comic-comics/comic-comics.component";
 
 export const comicRoutes: Routes = [
     {
@@ -9,8 +9,11 @@ export const comicRoutes: Routes = [
         component: ComicComicsComponent
     },
     {
-        path: 'comics/:comicId',
-        component: ComicComicsComponent,
+      path: 'comics/:comicId',
+      component: ComicComicsComponent,
+      resolve: {
+        comic: comicResolver
+      }
     },
     {
         path: 'publisher',