Ionic 2. Nested lists

One of the things that surprised me about Ionic 2 it is the ease with which it creates lists, an array in the controller and a *ngFor directive in the template is sufficient to create a list. A little example can be

In the controller

months: string[] = ['January', 'February', 'March', 'April',
                    'May','June', 'July', 'August',
                    'September', 'October', 'November',
                    'December'];

An in the template

<ion-list inset> <button ion-item *ngFor="let month of months" (tap)="monthSelected(month)"> {{ month }} </button> </ion-list>

An the result looks like

Easy and quick. But if you need put a list inside another, the things change.  It's not that it's more difficult, but the things change, starting in the data model and finishing in the template.

This is the way in that I solve this problem, I don't know if it is the best way, but it is the one I used and it works.

First the problem, I need put inside of each month in the list another list with his correspondant expense. So the data that I need are the month name, the total expense of the month, the correspondent expense and his amount.

The result has to be something like this

For that in the controller I have an array with the expenses

expenses: string[] = ['Shopping basket', 'Clothes', 'Electronics', 'Phone', 'Electricity','Fuel', 'Maintenance', 'Transport', 'Hairdressing, ...', 'Health', 'Entertainment','Taxes', 'Rentals'];

And an interface like that

interface Result { month: string; totalMonth: number; amount: number[]; }

An array of Result to which I call result will be the one that will contain the data that we pass to the template. For loop in the result I use the template form of the *ngFor as follows

<template ngFor let-entry [ngForOf]="result"> <ion-list inset> <ion-item> <ion-label class="month">{{ entry.month }}</ion-label>
<ion-label class="expense">{{entry.totalMonth }}$</ion-label> </ion-item> <ion-list inset> <ion-item *ngFor="let expense of entry.amount; let i = index"> <ion-label class="entry">{{ expenses[i] }}</ion-label> <ion-label class="expenseentry">{{ expense }}$</ion-label> </ion-item> </ion-list> </ion-list> </template>

How say here ngForOf is a directive that instantiate a template once per item for an iterable.  For each iteration the entry variable contains an Result, in the first list, the month list, we take the name of the month and the total expense.
Next, we create another list, the expenses list. For that the Result contains an array with the amount of the expense but not the name. The name is in another array (the cause that it is in another array and not in the Result that's not the point) so we will use another value of ngForOf. It is the value index, this value corresponds to index of the current item in the iterable. For obtain the values of the amount array we use an *ngFor, the difference is the introduction of the value index that we use for obtain the name of the expense.

And that's all, our nested list is ready.