nice

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;
+  }
 }