Pfthb

I'm new with Nativescript and I've a problem with ngFor. I've this GridLayout with inside a StackLayout with ngFor, the question how to set dynamic col and row inside the StackLayout?
Thans.

<GridLayout columns="*,*,*" rows=" totalRows " class="grid-book">
 <StackLayout *ngFor="let plan of plans; let i = index" row="0" col="0" horizontalAlignment="stretch">
 <StackLayout height="150" class="book">
 <AbsoluteLayout height="150">
 <StackLayout width="100%" left="0" top="0" height="100%" class="orange internal-book"></StackLayout>
 <Label text="" left="70" top="0" width="5" height="100%" backgroundColor="white"></Label>
 </AbsoluteLayout>
 </StackLayout>
 <Label text=" plan.name "></Label>
 </StackLayout>
</GridLayout>

You have a fixed number of columns (3) and an unbounded number of rows (totalRows). Instead of populating one large GridLayout I'd suggest making a StackLayout with an ngFor your outermost Layout, and put the GridLayout with 1 row and 3 columns inside that loop template.

Something like this:

<StackLayout *ngFor="let plan of plans">
 <GridLayout rows="*" columns="* * *">
 <Label text="A" col="0"></Label>
 <Label text="B" col="1"></Label>
 <Label text="C" col="2"></Label>
 </GridLayout>
</StackLayout>

Once you have the basic loop and layout working then you can substitute the Labels with your custom, per-cell template. If you use this Grid-inside-Stack technique you do not need the i/index or the totalRows string value.

You can use index as you are assiging it to i in this case.
I have tested below case in my html.

<GridLayout columns="*,*,*" class="grid-book">
 <StackLayout *ngFor="let plan of plans; let i = index" row="i" col="0" horizontalAlignment="stretch">
 <StackLayout height="150" class="book">
 <AbsoluteLayout height="150">
 <StackLayout width="100%" left="0" top="0" height="100%" class="orange internal-book"></StackLayout>
 <Label text="" left="70" top="0" width="5" height="100%" backgroundColor="white"></Label>
 </AbsoluteLayout>
 </StackLayout>
 <Label text=" plan.name "></Label>
 </StackLayout>
</GridLayout>

and in my .ts file plans = [ 'name': 'Name 1' , 'name': 'Name 2' , 'name': 'Name 3' ];

and if you see output using debugger

You may use property binding on rows / columns to keep it dynamic. But you will easily hit performance issues if you have so many divisions in a GridLayout (like 20 or 25+).

In my opinion you should use StackLayout to stack items next to each other in vertical orientation and use a GridLayout inside each item to divide the columns. Also I would recommend using a ListView instead of ngFor if possible.