working 3 tier approach

src/app/schedule/schedule.component.html

@@ -9,24 +9,30 @@
       </p>
     </div>
 
-    <div class="schedule-list">
-      <div class="schedule-day-label">Monday – Friday</div>
-      <div class="schedule-table">
-        <div *ngFor="let program of programs" class="schedule-row">
-          <div class="schedule-time">{{ program.time }}</div>
-          <div class="schedule-divider"></div>
-          <div class="schedule-details">
-            <h4 class="schedule-title">{{ program.title }}</h4>
-            <div class="schedule-meta">
-              <span class="schedule-host">
-                <span aria-hidden="true">🎙️</span> {{ program.host }}
-              </span>
-              <span class="schedule-genre">{{ program.genre }}</span>
+    @if (loading) {
+      <div class="schedule-loading">Loading schedule&hellip;</div>
+    } @else if (programs.length === 0) {
+      <div class="schedule-empty">No programs scheduled. Check back soon!</div>
+    } @else {
+      <div class="schedule-list">
+        <div class="schedule-day-label">Monday – Friday</div>
+        <div class="schedule-table">
+          <div *ngFor="let program of programs" class="schedule-row">
+            <div class="schedule-time">{{ program.time }}</div>
+            <div class="schedule-divider"></div>
+            <div class="schedule-details">
+              <h4 class="schedule-title">{{ program.title }}</h4>
+              <div class="schedule-meta">
+                <span class="schedule-host">
+                  <span aria-hidden="true">&#x1F399;</span> {{ program.host }}
+                </span>
+                <span class="schedule-genre">{{ program.genre }}</span>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    }
 
     <div class="schedule-weekend">
       <div class="weekend-heading">

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 = [];
+      },
+    });
+  }
 }