Ionic - HTML list with parents and child elements

Question

I have data in array where every element represents parent object, and every parent object has items array, whose elements are children. I have to generate on HTML parents list + nested children list under every parent. Every child element is clickable (navigates to another page). Something like on image. Any help here? I can use *ngFor to iterate first level elements (parents) and use ion-list and ion-item but how to nest children?

Answer 1

You can basically do a nested *ngFor.

Example data:

var categories = [
    {
        "name": "Category 1",
        "items": [
            "item1"
            "item2"
        ]
    }
];

Example template:

<div *ngFor="let category of categories">
    <h2>{{category.name}}</h2>
    <ion-list>
        <ion-item *ngFor="let item of category.items">{{item}}</ion-item>
    </ion-list>
</div>

At the top-level you iterate your categories, and for every single category, you iterate its items.