Dynamic GridLayout from array - Angular


#1

Nativescript newbie here! I have been trying to display items inside an array of objects in a grid format (like this: https://www.npmjs.com/package/nativescript-grid-view) to no avail. I am able to loop through and display the items in a normal listview with the code below:

<GridLayout>
    <ListView [items]="itemList" class="small-spacing">
        <ng-template let-item="item">
            <Label [text]="item.name" class="medium-spacing"></Label>
        </ng-template>
    </ListView>
</GridLayout>

Here’s my array structure:

[{"id":1, "name":"item1"},{"id":2, "name":"item2"},{"id":3, "name":"item3"},{"id":4, "name":"item4"},...]

I would love to be able to dynamically/programmatically generate and populate cells in a grid with data from the sample array above in columns of 2 or 3 (max) as below:

+------------------+-------------------+--------------------+
|                  |                   |                    |
|                  |                   |                    |
|                  |                   |                    |
+------------------+-------------------+--------------------+
|                  |                   |                    |
|                  |                   |                    |
|                  |                   |                    |
+------------------+-------------------+--------------------+
|                  |                   |                    |
|                  |                   |                    |
|                  |                   |                    |
+------------------+-------------------+--------------------+

I have tried the very few mentions of this scenario I found online, but no joy - please help!


How to create a grid view with two columns per row using RadListView
#2

For anyone looking to do the above, please see answers on this thread: How to create a grid view with two columns per row using RadListView