I have made updates to the plunker created by @JeanPaul A, where I addressed the issue of updating the array itself rather than the objects inside the array. You can view the changes in the updated plunker. The sorting functionality now works correctly for the objects within the array.
If there are still discrepancies in your data, I recommend checking the DatePipe formatting that I added. This will help you verify the accuracy of the dates displayed in the UI.
Updated Plunker Code:
// Angular app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { DatePipe } from '@angular/common';
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<button (click)="sort()">Sort</button>
<ul>
<li *ngFor="let date of dates">{{date | date: 'dd MM yyyy'}}</li>
</ul>
<ul>
<li *ngFor="let customer of customers">
{{customer.name}} -
{{customer.releaseDate | date: 'dd MM yyyy'}}</li>
</ul>
</div>
`,
})
export class App {
name:string;
customers: Array<any> = [
{"name": 'Mickey', "releaseDate": new Date('2012-07-12')},
{"name": 'Minnie', "releaseDate": new Date('2013-07-12')},
{"name": 'Donald', "releaseDate": new Date('2010-07-12')},
{"name": 'Pluto', "releaseDate": new Date('2014-07-12')}
]
dates:Array<Date> = [
new Date('2012-07-12'),
new Date('2013-07-12'),
new Date('2010-07-12'),
new Date('2014-07-12')
];
constructor() {
this.name = `Angular! v${VERSION.full}`
}
sort() {
this.dates.sort((a:Date, b:Date) => new Date(a).getTime() - new Date (b).getTime());
this.customers.sort((a: Customer, b: Customer) =>
new Date(a.releaseDate).getTime() - new Date (b.releaseDate).getTime());
console.log(this.customers);
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}