Pages/shows: show shows in a grid

src/pages/shows/shows.component.html

@@ -1 +1,13 @@
-<p>shows works!</p>
+<div class="container">
+  <div class="row row-cols-4">
+    @for (show of shows; track show._id) {
+      <div class="card col">
+        <!--    <img src="">-->
+        <div class="card-body">
+          <h5 class="card-title">{{ show.title }}</h5>
+          <p class="card-text">{{ show.year }}</p>
+        </div>
+      </div>
+    }
+  </div>
+</div>

src/pages/shows/shows.component.ts

@@ -1,4 +1,6 @@
-import { Component } from '@angular/core';
+import {Component, inject} from '@angular/core';
+import {ShowsApiService} from '../../shows/shows-api.service';
+import {Show, ShowsApiResponse} from '../../shows/shows-api';
 
 @Component({
   selector: 'app-shows',
@@ -7,5 +9,19 @@ import { Component } from '@angular/core';
   styleUrl: './shows.component.css'
 })
 export class ShowsComponent {
+  private api: ShowsApiService = inject(ShowsApiService);
 
+  shows: Show[] = [];
+
+  constructor() {
+    this.api.getShows().subscribe({
+      next: (response: ShowsApiResponse) => {
+        this.shows = response.shows;
+      }, error: (err: any) => {
+        console.error("Error: ", err);
+      }, complete: () => {
+        console.log("Loaded shows")
+      }
+    })
+  }
 }