avoid 'cannot read property of undefined' errors

I installed frxjs-Ngx-Timeline via (This is the demo)

npm i @frxjs/ngx-timeline  

It installed latest version, i.e., "@frxjs/ngx-timeline": "^19.0.0". This is my HTML code:

<div class="row row-space">
      <mat-card>
        <mat-card-header>
          <mat-card-title>
            Key Dates
          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <ngx-timeline [events]="events"></ngx-timeline>
        </mat-card-content>
      </mat-card>
    </div>  

And this is my typescript code: (I tried with a sample json data)

events = [
    { date: '2023-01-01', title: 'Event 1', description: 'Description for event 1.' },
    { date: '2023-06-01', title: 'Event 2', description: 'Description for event 2.' },
    { date: '2023-06-01', title: 'Event 3', description: 'Description for event 3.' },
    { date: '2023-06-01', title: 'Event 4', description: 'Description for event 4.' },
    { date: '2023-06-01', title: 'Event 5', description: 'Description for event 5.' },
  ]

When I ran that code, I got this error:

ERROR TypeError: Cannot read properties of undefined (reading 'getTime') at frxjs-ngx-timeline.mjs:880:33

So I tried to finetune that JSON with this code:

events = [
    { date: '2023-01-01', title: 'Event 1', description: 'Description for event 1.' },
    { date: '2023-06-01', title: 'Event 2', description: 'Description for event 2.' },
    { date: '2023-06-01', title: 'Event 3', description: 'Description for event 3.' },
    { date: '2023-06-01', title: 'Event 4', description: 'Description for event 4.' },
    { date: '2023-06-01', title: 'Event 5', description: 'Description for event 5.' },
  ].map(event => ({
    ...event,
    date: this.isValidDate(event.date) ? event.date : 'Invalid date'
  }));

  isValidDate(date: any): boolean {
    return !isNaN(new Date(date).getTime());
  }  

But that did not fix the error. How can I fix that error?
EDIT:
I tried with an interface:

interface NgxTimelineEvent {
  date: string;
  title: string;
  description?: string;
  highlight?: boolean;
}
events: NgxTimelineEvent[] = [
    { date: '2023-01-01', title: 'Label 1', description: 'File 1', highlight: false },
    { date: '2023-06-01', title: 'Label 2', description: 'File 2', highlight: true }
  ]  

But that did not fix the error.

One of the problems is that you have named the property date when it should be timestamp as per the below interface.

export interface NgxTimelineEvent {
    timestamp?: Date;
    title?: string;
    description?: string;
    id?: any;
    itemPosition?: NgxTimelineItemPosition;
}

You are supposed to provide a date object and not string. The getTime is a method of the date class, that is why you are getting the error.

ERROR TypeError: Cannot read properties of undefined (reading 'getTime') at frxjs-ngx-timeline.mjs:880:33

Try passing in dates instead of strings, I use new Date(...) to convert your strings to dates, please do the same.

events = [
    { timestamp: new Date('2023-01-01'), title: 'Event 1', description: 'Description for event 1.' },
    { timestamp: new Date('2023-06-01'), title: 'Event 2', description: 'Description for event 2.' },
    { timestamp: new Date('2023-06-01'), title: 'Event 3', description: 'Description for event 3.' },
    { timestamp: new Date('2023-06-01'), title: 'Event 4', description: 'Description for event 4.' },
    { timestamp: new Date('2023-06-01'), title: 'Event 5', description: 'Description for event 5.' },
  ]

Full Code:

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { NgxTimelineModule, NgxTimelineEvent } from '@frxjs/ngx-timeline';
@Component({
  selector: 'app-root',
  imports: [NgxTimelineModule],
  template: `
    <ngx-timeline [events]="events"></ngx-timeline>
  `,
})
export class App {
  events: NgxTimelineEvent[] = [
    {
      timestamp: new Date('2023-01-01'),
      title: 'Event 1',
      description: 'Description for event 1.',
    },
    {
      timestamp: new Date('2023-06-01'),
      title: 'Event 2',
      description: 'Description for event 2.',
    },
    {
      timestamp: new Date('2023-06-01'),
      title: 'Event 3',
      description: 'Description for event 3.',
    },
    {
      timestamp: new Date('2023-06-01'),
      title: 'Event 4',
      description: 'Description for event 4.',
    },
    {
      timestamp: new Date('2023-06-01'),
      title: 'Event 5',
      description: 'Description for event 5.',
    },
  ];
}

bootstrapApplication(App);

Stackblitz Demo