nice

src/app/components/main-view/main-view.component.html

@@ -2,9 +2,12 @@
   <div class="row mt-3"><h1>TV-Serien</h1></div>
   <div class="row mt-1">
     <div class="col-md-7 mb-3">
-      <app-show-list></app-show-list>
+      <app-show-list [shows]="shows" (selectedShow)="onSelectedShow($event)"></app-show-list>
     </div>
     <div class="col-md-5">
+      @if (isShowSelected) {
+        <app-show-details [detailShow$]="selectedShow$"></app-show-details>
+      }
     </div>
     <app-show-form></app-show-form>
   </div>

src/app/components/main-view/main-view.component.ts

@@ -1,16 +1,41 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {ShowListComponent} from '../show-list/show-list.component';
+import {Show} from '../../model/show';
+import {ShowService} from '../../services/show.service';
 import {ShowFormComponent} from '../show-form/show-form.component';
+import {BehaviorSubject} from 'rxjs';
+import {ApiService} from '../../services/api-service';
+import {ShowDetailsComponent} from '../show-details/show-details.component';
 
 @Component({
   selector: 'app-main-view',
   standalone: true,
   imports: [
     ShowListComponent,
-    ShowFormComponent
+    ShowFormComponent,
+    ShowDetailsComponent
   ],
   templateUrl: './main-view.component.html',
   styleUrl: './main-view.component.css'
 })
 export class MainViewComponent {
+  private dataService: ShowService = inject(ShowService);
+  private apiService: ApiService = inject(ApiService);
+
+  public shows: Show[] = [];
+  selectedShow$: BehaviorSubject<Show>;
+  isShowSelected = false;
+
+  constructor() {
+    this.shows = this.dataService.getShows();
+    this.selectedShow$ = new BehaviorSubject<Show>(new Show(0, ""))
+  }
+
+  onSelectedShow(show: Show) {
+    const title = show.title ?? '';
+    this.apiService.getDetailShow(title).subscribe((s) => {
+      this.selectedShow$.next(s);
+    });
+    this.isShowSelected = true;
+  }
 }