working 3 tier approach

src/app/events/events.component.ts

@@ -1,50 +1,32 @@
-import { Component } from '@angular/core';
-import { NgFor } from '@angular/common';
+import { Component, inject, OnInit } from '@angular/core';
+import { DatePipe, NgFor } from '@angular/common';
 
-interface Event {
-  date: string;
-  title: string;
-  description: string;
-  location: string;
-  icon: string;
-}
+import { EventService } from '../services/event.service';
+import { Event } from '../interfaces/event';
 
 @Component({
   selector: 'app-events',
   standalone: true,
-  imports: [NgFor],
+  imports: [DatePipe, NgFor],
   templateUrl: './events.component.html',
   styleUrl: './events.component.scss',
 })
-export class EventsComponent {
-  readonly upcomingEvents: Event[] = [
-    {
-      date: 'July 12, 2026',
-      title: 'Summer Sounds Festival',
-      description: 'A full day of live local music, community booths, and station meet-and-greet at the foothills park. Free admission — donations welcome.',
-      location: 'Foothills Community Park',
-      icon: '🎵',
-    },
-    {
-      date: 'August 5, 2026',
-      title: 'Annual Fundraiser Gala',
-      description: 'Our biggest fundraiser of the year! Enjoy dinner, silent auction, and performances from past guest artists.',
-      location: 'Mountain View Ballroom',
-      icon: '🎙️',
-    },
-    {
-      date: 'September 18, 2026',
-      title: 'Volunteer Open House',
-      description: 'Tour the studio, meet the team, and learn how you can help keep our free stream alive. New volunteers always welcome!',
-      location: 'KMTN Studio — 42 Pine St',
-      icon: '🤝',
-    },
-    {
-      date: 'October 30, 2026',
-      title: 'Harvest Moon Broadcast',
-      description: 'Special live broadcast from the harvest moon gathering. Featuring folk, bluegrass, and indigenous music.',
-      location: 'Ridgefield Amphitheater',
-      icon: '🌙',
-    },
-  ];
+export class EventsComponent implements OnInit {
+  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 = [];
+      },
+    });
+  }
 }