additional files

src/app/schedule/schedule.component.ts

@@ -1,32 +1,53 @@
-import { Component, inject, OnInit } from '@angular/core';
-import { NgFor } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { AsyncPipe, NgFor } from '@angular/common';
+import { map, Observable, startWith } from 'rxjs';
 
 import { ProgramService } from '../services/program.service';
 import { Program } from '../interfaces/program';
 
+interface DayGroup {
+  day_label: string;
+  day_of_week: number;
+  programs: Program[];
+}
+
+interface ScheduleState {
+  loading: boolean;
+  dayGroups: DayGroup[];
+}
+
+function groupByDay(programs: Program[]): DayGroup[] {
+  const map = new Map<string, DayGroup>();
+
+  for (const p of programs) {
+    if (!map.has(p.day_label)) {
+      map.set(p.day_label, {
+        day_label: p.day_label,
+        day_of_week: p.day_of_week,
+        programs: [],
+      });
+    }
+    map.get(p.day_label)!.programs.push(p);
+  }
+
+  return Array.from(map.values()).sort((a, b) => a.day_of_week - b.day_of_week);
+}
+
 @Component({
   selector: 'app-schedule',
   standalone: true,
-  imports: [NgFor],
+  imports: [AsyncPipe, NgFor],
   templateUrl: './schedule.component.html',
   styleUrl: './schedule.component.scss',
 })
-export class ScheduleComponent implements OnInit {
+export class ScheduleComponent {
   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 = [];
-      },
-    });
-  }
+  /** Async pipe drives the template — guarantees change detection on every emission. */
+  readonly schedule$: Observable<ScheduleState> =
+    this.programService.getPrograms().pipe(
+      map((programs) => groupByDay(programs)),
+      map((dayGroups) => ({ loading: false, dayGroups })),
+      startWith({ loading: true, dayGroups: [] }),
+    );
 }