add Artist Details

kontor-angular/src/app/app.config.ts

@@ -1,5 +1,5 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideHttpClient } from '@angular/common/http';
@@ -8,7 +8,7 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes),
+    provideRouter(routes, withComponentInputBinding()),
     provideHttpClient(),
   ]
 };

kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.css

@@ -0,0 +1,5 @@
+div {
+  border-radius: 6px;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}

kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.html

@@ -0,0 +1,5 @@
+<div>
+  <a [routerLink]="[artist().id]" routerLinkActive="active">
+    <span>{{ artist().name }}</span>
+  </a>
+</div>

kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ArtistDetailComponent } from './artist-detail.component';
+
+describe('ArtistDetailComponent', () => {
+  let component: ArtistDetailComponent;
+  let fixture: ComponentFixture<ArtistDetailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ArtistDetailComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ArtistDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

kontor-angular/src/app/comic/artist/artist-detail/artist-detail.component.ts

@@ -0,0 +1,14 @@
+import { Component, input, signal } from '@angular/core';
+import { Artist } from '../artist.model';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-artist-detail',
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './artist-detail.component.html',
+  styleUrl: './artist-detail.component.css'
+})
+export class ArtistDetailComponent {
+  artist = input.required<Artist>();
+
+}

kontor-angular/src/app/comic/artist/artist-list/artist-list.component.css

@@ -0,0 +1,14 @@
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 0.5rem;
+  overflow: auto;
+}
+
+@media (min-width: 768px) {
+  ul {
+    flex-direction: column;
+  }
+}

kontor-angular/src/app/comic/artist/artist-list/artist-list.component.html

@@ -1,8 +1,7 @@
-<p>artist-list works!</p>
 <ul>
   @for (artist of artists(); track artist.id) {
-  <li>
-    <h3>{{ artist.name }}</h3>
-  </li>
+    <li>
+      <app-artist-detail [artist]="artist"/>
+    </li>
   }
 </ul>

kontor-angular/src/app/comic/artist/artist-list/artist-list.component.ts

@@ -1,10 +1,11 @@
 import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
 import { Artist } from '../artist.model';
 import { ArtistService } from '../artist.service';
+import { ArtistDetailComponent } from "../artist-detail/artist-detail.component";
 
 @Component({
   selector: 'app-artist-list',
-  imports: [],
+  imports: [ArtistDetailComponent],
   templateUrl: './artist-list.component.html',
   styleUrl: './artist-list.component.css'
 })

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

@@ -15,7 +15,7 @@ export class ArtistService {
   loadedArtists = this.artists.asReadonly();
 
   loadArtists() {
-    return this.fetchArtists('http://127.0.0.1:8800/api/comics/artists', 'Someting went wrong fetching sports. Please try again later-');
+    return this.fetchArtists('http://127.0.0.1:8800/api/comics/artists', 'Someting went wrong fetching artists. Please try again later-');
   }
 
   private fetchArtists(url: string, errorMessage: string) {