additional files

src/app/events/events.component.ts

@@ -1,32 +1,29 @@
-import { Component, inject, OnInit } from '@angular/core';
-import { DatePipe, NgFor } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { AsyncPipe, DatePipe, NgFor } from '@angular/common';
+import { map, Observable, startWith } from 'rxjs';
 
 import { EventService } from '../services/event.service';
 import { Event } from '../interfaces/event';
 
+interface EventsState {
+  loading: boolean;
+  upcomingEvents: Event[];
+}
+
 @Component({
   selector: 'app-events',
   standalone: true,
-  imports: [DatePipe, NgFor],
+  imports: [AsyncPipe, DatePipe, NgFor],
   templateUrl: './events.component.html',
   styleUrl: './events.component.scss',
 })
-export class EventsComponent implements OnInit {
+export class EventsComponent {
   private eventService = inject(EventService);
 
-  upcomingEvents: Event[] = [];
-  loading = true;
-
-  ngOnInit(): void {
-    this.eventService.getEvents(true).subscribe({
-      next: (data) => {
-        this.upcomingEvents = data;
-        this.loading = false;
-      },
-      error: () => {
-        this.loading = false;
-        this.upcomingEvents = [];
-      },
-    });
-  }
+  /** Async pipe drives the template — guarantees change detection on every emission. */
+  readonly events$: Observable<EventsState> =
+    this.eventService.getEvents(true).pipe(
+      map((upcomingEvents) => ({ loading: false, upcomingEvents })),
+      startWith({ loading: true, upcomingEvents: [] }),
+    );
 }