ngfor table group by date

Question

How do I use *ngFor to create a HTML table group by date in columns. This is a example of json List:

[{ "id": "700", "FamilyDesc": "MERCEDES", "model": "Mercedes-BenzClasse A", "cost": "60000" "date": "21/09/2022" }, { "id": "700", "FamilyDesc": "MERCEDES", "model": "Mercedes-BenzClasse A", "cost": "30000" "date": "01/01/2021" }, { "id": "700", "FamilyDesc": "MERCEDES", "model": "Mercedes-BenzClasse B", "cost": "50000" "date": "01/01/2022" }, { "id": "700", "FamilyDesc": "MERCEDES", "model": "Mercedes-BenzClasse B", "cost": "40000" "date": "01/01/2021" }, { "id": "700", "FamilyDesc": "BMW", "model": "X4", "cost": "80000" "date": "01/01/2022" }, { "id": "700", "FamilyDesc": "BMW", "model": "X4", "cost": "70000" "date": "01/01/2021" } ]

what is the best way to have this result: example view

Thanks!!

users0p91 · Answer

I suggest using a libary like angular material. Here some examples: https://material.angular.io/components/table.

If you dont want to use a libary you can write a script: https://www.w3schools.com/howto/howto_js_sort_table.asp

*ngFor is just used to loop the data in.

ngfor table group by date

1 Answers