Angular Organize mat-list by date

Question

I use angular Cli 6. I have several data from several services that I want to display all together on the same page. I would like to display the different div by increasing dates.

All my services work the same way:

<mat-card-content>
    <mat-list *ngFor="let examenToDisplay  of examensToDisplay | async">
        <mat-list><mark><strong>{{ examenToDisplay?.dateexamen | date:' d/MM/y'}}</strong></mark> </mat-list>
        <mat-list *ngIf="examenToDisplay.typeexamen"> Examen : <strong>{{ examenToDisplay?.typeexamen }}</strong> </mat-list>
        <mat-list  *ngIf="examenToDisplay.commentaires">Conclusion :  <strong>{{ examenToDisplay?.commentaires }}  </strong> </mat-list>
    </mat-list>
</mat-card-content>

I have three others mar-card. How i can filter the three ? Thanks

To be sure, What you want is: Display items of examensToDisplay order by date? — Wandrille, Jul 08 '18 at 08:41
examensToDisplay is one of bloc to display. I have DiagnosticToDisplay, TreatementToDisplay,... all of the blocs have a date. i want display all data by date. it is possible ? thx — Newbiiiie, Jul 08 '18 at 08:52

score 2 · Accepted Answer · answered Jul 08 '18 at 08:59

2

There is many posibilities to order by date your content.

If you have your own back server, you can order by date directly with some query.
In your service.ts or component.ts, you can order by date when you fetch your data with a custom sort (see here)
In your HTML, you can use a custom orderBy pipe (example).

To manage your dates correctly, you can use the package Moment

answered Jul 08 '18 at 08:59

Wandrille

6,267
3
20
43

I think i am interesting by the third solution but it is possible if you have many datastoDisplay ? – Newbiiiie Jul 08 '18 at 09:14
For each *ngFor, you will have `*ngFor="let item of myListToDisplay| myCustomSortPipe"` – Wandrille Jul 08 '18 at 09:17

Angular Organize mat-list by date

1 Answers1