Sort item list by earliest collection dateTime in angular2

Question

I'm new to angular2 and I'm trying to sort out my food order list by collection time datestamp coming from the database.

let say the order object is below and in my template I want to sort it with earliest collectiontime in the example below it would be id: 2454

var awaitingPicking = [
  {
   "id": "2452",
   "OrderLineGroups": [
     {
       "CollectionDetails": {
         "CollectionFrom": "2017-03-21T11:00:00.317"
       }
     }
   ]
  },
{
   "id": "2454",
   "OrderLineGroups": [
     {
       "CollectionDetails": {
         "CollectionFrom": "2017-03-21T11:00:00.317"
       }
     }
   ]
  }
 ]

Image shows how my list is being rendered in my HTML and it puts id: 2454 at the bottom when it should be before id: 2452.

Edit --

this.awaitingPicking.push(element); // these holds all order objects
this.awaitingPicking.map(e => {
  this.getCollectionFrom = e.CollectionFrom = e.OrderLineGroups[0].CollectionDetails.CollectionFrom
   return e
})

Template --

<div *ngFor="let prepare of awaitingPicking | orderBy: '+getCollectionFrom'" id="prepareOrder"> </div>

How can I sort the list with earliest collectionFrom?

sample image

Answer 1

the solution uses a custom filter that only goes one level deep, so your data must also be only 1 level deep:

https://plnkr.co/edit/rCGc2IZECuPiL3QqNnlJ?p=preview (updated)

changes:

app.ts

//...
@Component({
  selector: 'my-app',
  providers: [],
  pipes: [DatePipe, ArraySortPipe],
  template: `
    <ul>
      <li *ngFor="#item of sortableArray | arraySort:'+CollectionFrom'">{{item.id}} {{item.CollectionFrom}}</li>
    </ul>
  `,
  directives: []
})
//...
export class App {

  inputArray: Array<any> = [
      {
     "id": "2452",
     "OrderLineGroups": [
       {
         "CollectionDetails": {
           "CollectionFrom": "2017-03-21T11:40:00.317"
         }
       }
     ]
    },
  {
     "id": "2454",
     "OrderLineGroups": [
       {
         "CollectionDetails": {
           "CollectionFrom": "2017-03-21T11:00:00.317"
         }
       }
     ]
    }
  ]

  sortableArray: Array<any> = this.inputArray.map(e => {
    e.CollectionFrom = e.OrderLineGroups[0].CollectionDetails.CollectionFrom
    return e
  })

  constructor() {}
}

//...