It might be the case here, that the actual date values of a.startDate and b.startDate during runtime are undefined.

You could try to see if you get some results again when you use this:

this.allEvents.sort((a, b) => (a.startDate && b.startDate) ? a.startDate.getTime() - b.startDate.getTime() : 0);

If you see (partially unsorted) results again, you know the issue is indeed caused by undefined values of those date fields. In that case, you can customize the sorting function further by correctly handling those undefined values:

this.allEvents.sort((a, b) => {
  if (a.startDate && b.startDate) {
    return a.startDate.getTime() - b.startDate.getTime();
  }
  else {
    // do something sophisticated regarding the `undefined` values and return a correct sorting value here...
  }
});

I want to custom a page in D365 Event Management.
Its written in HTML,CSS,JS,AngularJS and Typescript.

I have a html file with an overview of events:

<div class="spinner-container m-5" *ngIf="isLoading">
    <app-spinner></app-spinner>
</div>


<div *ngIf="!isLoading">
    <div class="container">
        <div class="page-header">
            <h3 [appTranslate]="'AvailableEvents'">Available events</h3>
        </div>
    </div>

    <div *ngIf="error">
        <app-errormessage
            [serverErrorMessage]="error.message"
            [errorMessageTranslationKey]="error.localizationKey">
        </app-errormessage>
    </div>

    <div *ngIf="allEvents" class="container mt-5" id="all-events">
        <div class="row">
            <div class="col-12 col-md-6 col-lg-4" attr.data-href="/event?id={{ event.readableEventId }}" *ngFor="let event of allEvents">
                <div class="card mx-auto mb-4" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">
                             <a [routerLink]="['/event']" [queryParams]="{id: event.readableEventId}" title="{{ event.eventName }}" [attr.aria-label]="getAreaLabel(event)">
                                {{ event.eventName }}</a>
                        </h5>
                        <h6 *ngIf="event.building" class="card-subtitle mb-2 text-dark">at {{ event.building.name }} </h6>
                    </div>
                    <div class="card-footer text-dark" >
                       {{ getDateString(event) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

First I tried to sort the divs but as the value of the dates are dynamic I thought its not possible.
So I went to the typescript file:

import { EVENT_SERVICE } from './../../providers/service.providers';
import { EventService } from '../../services/event.service';
import { Component, Inject, OnInit } from '@angular/core';
import { Event } from '../../models/Event';

...

export class HomeComponent implements OnInit {
    public allEvents: Event[];
    public isLoading: boolean;
    public error?: LocalizableError;

    constructor(@Inject(EVENT_SERVICE) private eventService: EventService) {
    }

    ngOnInit(): void {
        this.sortEvents();
        this.loadPublishedEvents();
    }

//---> This is my try to sort it
    private sortEvents(){
        this.allEvents.sort((a, b) => a.startDate.getDate() - b.startDate.getDate());
    }
//<---
    private loadPublishedEvents() {
        this.isLoading = true;
        this.eventService.getPublishedEvents().subscribe(
            events => {
                this.allEvents = events;
                this.isLoading = false;
            },
            (error: LocalizableError) => this.handleErrorResponse(error)
        );
    }

...

private getDateString(event:Event): string{

        var startDate = new Date(event.startDate.toString());
        var endDate = new Date(event.endDate.toString());
        var locale = undefined;
        const dateOptions = { year: 'numeric', month: 'short', day: 'numeric' };
        const timeOptions = { hour:'numeric', minute:'numeric' };

        var includeTime = startDate.getFullYear() ===  endDate.getFullYear() && startDate.getMonth() ===  endDate.getMonth() && startDate.getDate() ===  endDate.getDate();
        if(includeTime)
        {
            return `${startDate.toLocaleDateString(locale, dateOptions)} ${startDate.toLocaleTimeString(locale, timeOptions)} - ${endDate.toLocaleTimeString(locale, timeOptions)}`;
        }
        return `${startDate.toLocaleDateString(locale, dateOptions)} - ${endDate.toLocaleDateString(locale, dateOptions)}`;
    }

Event.ts:

export interface Event {
    ...
    endDate: Date;
    startDate: Date;
    ...
}

My question is now how to sort this Events by date. In standard its sorted by name.
when I sort it like I did the elements won’t appear.
I think the problem is that the date of the events are not created with “newDate” like in getDateString().
I’m not very familiar with typescript. Also couldn’t find anything on google except of this what I already tried.

Would be very nice if someone could help me here.
If you have any questions, just ask.

thx in advance 🙂