ARTICLE AD BOX
I am trying to build an HTTP application with Angular 20 and having an issue with one of my components. I am making a HTTP GET call with one of my services to an API and returning all events I can find:
Event Service:
public GetAllEventsCardInfo() : Observable<EventInfo[]> { return this.http.get<EventInfo[]>("https://localhost:7034/Event"); }After checking while debugging I can confirm that an array containing one EventInfo is returned with all the properties containing the correct value. I am then taking that result and passing it to another component to display. Below is how I am calling the api:
home-page.ts
@Component({ selector: 'app-home-page', imports: [EventDisplayCard, RecipientDisplayCard, EventAddModule, MatIconModule, RecipientAddModal, AsyncPipe], templateUrl: './home-page.html', styleUrl: './home-page.css' }) export class HomePage { events$ : Observable<EventInfo[]> = of([]); recipients : RecipientSummaryInfo[] = []; addModalVisible : boolean = false; addRecipientVisible : boolean = false; constructor(private eventService : EventService) { } ngOnInit() { this.events$ = this.eventService.GetAllEventsCardInfo(); } }home-page.html
<div class="flex flex-wrap relative"> @for (event of events$ | async; track event.Id){ <event-display-card [EventInfo]="event" /> } @empty { <div id="" class="mt-5"> <div class="w-70 mx-2 bg-slate-100 border-slate-300 border-l border-b border-r border-solid z-29 ring event-card"> <span>No events found! Add an event to get started!</span> </div> </div> } </div>the event display card is taking the EventInfoand just outputing the name and event date into a div as shown below:
event-display-card.html
<div id="" class="cursor-pointer mt-5" (click)="eventClick()"> <div class="w-70 mx-2 bg-slate-100 border-slate-300 border-l border-b border-r border-solid z-29 ring event-card"> <div class="flex"> <div class="font-serif text-sm w-2/3 text-center py-2"> <div>{{ EventInfo.Name }}</div> <div>{{ EventInfo.EventDate.toLocaleDateString() }}</div> </div> <div class="w-1/3"></div> </div> </div> </div>The problem is that I keep getting an error stating can't access property "toLocaleDateString", ctx.EventInfo.EventDate is undefined . I know this is because of the .toLocaleDateString() but I can't figure out why the EventInfo passed into the parameter is empty.
If someone could please help educate me that would be greatly appreciated. I am very well versed in backend setups but this is my first attempt at a front-end application.
export class EventInfo { public Id: string = ""; public Name: string = ""; public EventDate: Date = new Date(); public Budget: number = 0; };and the returned json looks like :
[{ "id":"019c9136-a438-72bb-b983-76a1b4d3b514", "name":"test", "budget":220, "eventDate":"2026-02-10T18:00:00-06:00" }]If any additional information is needed I will gladly provide. Thank you and have a great day!
