add navigation and fetching of sports

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

@@ -1 +0,0 @@
-<p>artist works!</p>

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

@@ -0,0 +1 @@
+<p>artist-list works!</p>

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

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { Artist } from './artist-list.component';
+import { ArtistListComponent } from './artist-list.component';
 
-describe('Artist', () => {
-  let component: Artist;
-  let fixture: ComponentFixture<Artist>;
+describe('ArtistListComponent', () => {
+  let component: ArtistListComponent;
+  let fixture: ComponentFixture<ArtistListComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [Artist]
+      imports: [ArtistListComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(Artist);
+    fixture = TestBed.createComponent(ArtistListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'kontor-artist-list',
+  selector: 'app-artist-list',
   imports: [],
   templateUrl: './artist-list.component.html',
   styleUrl: './artist-list.component.css'

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

@@ -1,10 +1,16 @@
-<p>comic-overview works!</p>
-<div>
+<!-- <p>comic-overview works!</p>
+<div class="subnav">
   <ul>
-    <li><a routerLink="/comic/comics">Comics</a></li>
+    <li><a routerLink="/comic/comics" routerLinkActive>Comics</a></li>
     <li><a routerLink="/comic/publisher">Publisher</a></li>
     <li><a routerLink="/comic/artist">Artists</a></li>
   </ul>
   <h4>Child Routes Result</h4>
   <router-outlet></router-outlet>
+</div> -->
+<div class="subnav">
+  <a routerLink="/comic/comics" routerLinkActive="active">Comics</a>
+  <a routerLink="/comic/publisher" routerLinkActive="active">Publisher</a>
+  <a routerLink="/comic/artist" routerLinkActive="active">Artists</a>
 </div>
+<router-outlet></router-outlet>

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

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
-import { RouterLink, RouterOutlet } from '@angular/router';
+import { RouterLink, RouterOutlet, RouterLinkActive } from '@angular/router';
 
 @Component({
   selector: 'app-comic-overview',
-  imports: [RouterLink, RouterOutlet],
+  imports: [RouterLink, RouterOutlet, RouterLinkActive],
   templateUrl: './comic-overview.component.html',
   styleUrl: './comic-overview.component.css'
 })

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

@@ -0,0 +1 @@
+<p>comic-list works!</p>

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

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ComicsListComponent } from './comics-list.component';
+import { ComicListComponent } from './comic-list.component';
 
-describe('Comics', () => {
-  let component: ComicsListComponent;
-  let fixture: ComponentFixture<ComicsListComponent>;
+describe('ComicListComponent', () => {
+  let component: ComicListComponent;
+  let fixture: ComponentFixture<ComicListComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ComicsListComponent]
+      imports: [ComicListComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(ComicsListComponent);
+    fixture = TestBed.createComponent(ComicListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-comic-list',
+  imports: [],
+  templateUrl: './comic-list.component.html',
+  styleUrl: './comic-list.component.css'
+})
+export class ComicListComponent {
+
+}

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

@@ -1 +0,0 @@
-<p>comics works!</p>

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

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'kontor-comics-list',
-  imports: [],
-  templateUrl: './comics-list.component.html',
-  styleUrl: './comics-list.component.css'
-})
-export class ComicsListComponent {
-
-}

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

@@ -1 +0,0 @@
-<p>publisher works!</p>

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

@@ -0,0 +1 @@
+<p>publisher-list works!</p>

kontor-angular/src/app/comic/publisher/publisher-list/publisher-list.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { Publisher } from './publisher-list.component';
+import { PublisherListComponent } from './publisher-list.component';
 
-describe('Publisher', () => {
-  let component: Publisher;
-  let fixture: ComponentFixture<Publisher>;
+describe('PublisherListComponent', () => {
+  let component: PublisherListComponent;
+  let fixture: ComponentFixture<PublisherListComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [Publisher]
+      imports: [PublisherListComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(Publisher);
+    fixture = TestBed.createComponent(PublisherListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'kontor-publisher-list',
+  selector: 'app-publisher-list',
   imports: [],
   templateUrl: './publisher-list.component.html',
   styleUrl: './publisher-list.component.css'