mat-list arrange by under same category and heading should come once

Question

I have a mat-list and I am displaying category and name with data in it. Please note the stackblitz: https://stackblitz.com/edit/angular-material-list-krzxrz?file=app%2Fapp.component.ts

What I need is to arrange is so that the category Fruits comes as heading with the fruit names under it, and then the same with vegetables.

Do you want a tree structure or a table structure look like? It is not clear what are you trying to achieve here. — vsarunov, May 13 '19 at 05:58
https://stackoverflow.com/questions/40774697/how-to-group-an-array-of-objects-by-key — Vikas, May 13 '19 at 06:04

score 1 · Accepted Answer · answered May 13 '19 at 06:17

If what you want to achieve is display each item of a category under a header with that category name, a possible approach is to group your array of object (simpleItems) by name and then use the keyvalue pipe to print the key followed by the elements.

Here's a Stackblitz example.

Hope this helps.

mat-list arrange by under same category and heading should come once

1 Answers1