working 3 tier approach

src/app/schedule/schedule.component.ts

@@ -1,12 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { NgFor } from '@angular/common';
 
-interface Program {
-  time: string;
-  title: string;
-  host: string;
-  genre: string;
-}
+import { ProgramService } from '../services/program.service';
+import { Program } from '../interfaces/program';
 
 @Component({
   selector: 'app-schedule',
@@ -15,17 +11,22 @@ interface Program {
   templateUrl: './schedule.component.html',
   styleUrl: './schedule.component.scss',
 })
-export class ScheduleComponent {
-  readonly programs: Program[] = [
-    { time: '6:00 AM', title: 'Morning Mountain Mist', host: 'Diana Walsh', genre: 'Ambient / Nature' },
-    { time: '8:00 AM', title: 'Community Roundup', host: 'Tom Breen', genre: 'News / Talk' },
-    { time: '10:00 AM', title: 'Bluegrass Trails', host: 'Sarah Lynn', genre: 'Bluegrass' },
-    { time: '12:00 PM', title: 'Lunchtime Jazz', host: 'Mike Darrow', genre: 'Jazz' },
-    { time: '2:00 PM', title: 'Folk Roots Hour', host: 'Nadia Cole', genre: 'Folk' },
-    { time: '4:00 PM', title: 'Afternoon Acoustics', host: 'Jen Reeves', genre: 'Acoustic' },
-    { time: '6:00 PM', title: 'Evening Echoes', host: 'Carlos Mendez', genre: 'Indie / Alternative' },
-    { time: '8:00 PM', title: 'Classical Mountains', host: 'Elena Cross', genre: 'Classical' },
-    { time: '10:00 PM', title: 'Night Owl Session', host: 'DJ Kofi', genre: 'Electronic' },
-    { time: '12:00 AM', title: 'Late Night Jazz', host: 'Mike Darrow', genre: 'Jazz' },
-  ];
+export class ScheduleComponent implements OnInit {
+  private programService = inject(ProgramService);
+
+  programs: Program[] = [];
+  loading = true;
+
+  ngOnInit(): void {
+    this.programService.getPrograms().subscribe({
+      next: (data) => {
+        this.programs = data;
+        this.loading = false;
+      },
+      error: () => {
+        this.loading = false;
+        this.programs = [];
+      },
+    });
+  }
 }