<ActionBar title="NativeFlix"></ActionBar>

<ListView

height="100%"

separatorColor="transparent"

[items]="flickService.getFlicks()"

(itemTap)="onFlickTap($event)"

(itemLoading)="onItemLoading($event)"

>

<ng-template let-item="item">

<!-- The item template can only have a single root view container (e.g. GridLayout, StackLayout, etc.)-->

<GridLayout

height="280"

borderRadius="10"

class="bg-secondary"

rows="*, auto, auto"

columns="*"

margin="12 10 0 10"

padding="0"

>

<image row="0" margin="0" stretch="aspectFill" [src]="item.image"></image>

<label

row="1"

margin="10 10 0 10"

fontWeight="700"

class="text-primary"

fontSize="18"

[text]="item.title"

></label>

<label

row="2"

margin="0 10 10 10"

class="text-secondary"

fontSize="14"

textWrap="true"

[text]="item.description"

></label>

</GridLayout>

</ng-template>

</ListView>