TypeScript 2.x By Example

Board component template

Let's look at the template code we have for our Board component, and then briefly go through the code structure:

<StackLayout class="main"> <label text="Tasks for: {{board.title}}" class="label"></label> <ListView [items]="board.task" class="large-spacing"> <ng-template let-item="item"> <WrapLayout > <Label [text]="item.title" class="task" ></Label> <StackLayout orientation="vertical"> <StackLayout class="subTask" *ngFor="let subtask of item.subtask"> <Label [text]="subtask.title" ></Label> </StackLayout> </StackLayout> </WrapLayout> </ng-template> </ListView></StackLayout>

As we learned earlier, in NativeScript we normally use <StackLayout> as our wrapper for a template. As we are displaying a list of Tasks and ...