📺 "One project. One language. Three apps." Learn more in our upcoming code sharing webinar!

NativeScript Core

Multi Line Big

Multi line items with bigger thumbnails (left)

<ListView class="list-group" [items]="countries" (itemTap)="onItemTapSecondList($event)" (setupItemView)="onSetupItemView($event)">
    <ng-template let-country="item" let-third="third">
        <GridLayout class="list-group-item" rows="*" columns="auto, *">
            <StackLayout col="1">
                <Label class="list-group-item-heading" [text]="country.name"></Label>
                <Label class="list-group-item-text" [text]="country.desc" textWrap="true"></Label>
            </StackLayout>
            <Image col="0" [src]="country.imageSrc" class="thumb img-rounded" width="92" height="92" verticalAlignment="top"></Image>
        </GridLayout>
    </ng-template>
</ListView>

Multi line items with bigger thumbnails (right)

Grouped multi line items with bigger thumbnails

<ListView [items]="groupedCountries" [itemTemplateSelector]="templateSelector" (itemTap)="onItemTapFirstList($event)" class="list-group"
    separatorColor="white">
    <ng-template nsTemplateKey="header" let-header="item">
        <Label [text]="header.name" class="list-group-item bg-primary" isUserInteractionEnabled="false" color="white" fontSize="24"></Label>
    </ng-template>

    <ng-template nsTemplateKey="footer" let-footer="item">
        <Label [text]="footer.name" class="list-group-item" backgroundColor="gray" fontSize="12"></Label>
    </ng-template>

    <ng-template nsTemplateKey="cell" let-country="item">
        <GridLayout class="list-group-item" rows="*" columns="*, auto">
            <StackLayout col="0">
                <Label [text]="country.name" class="list-group-item-heading"></Label>
                <Label [text]="country.desc" class="list-group-item-text" textWrap="true"></Label>
            </StackLayout>
            <Image col="1" [src]="country.imageSrc" class="thumb img-rounded" width="92" height="92" verticalAlignment="top"></Image>
        </GridLayout>
    </ng-template>
</ListView>

Initializing the data Items

import { Component, ChangeDetectionStrategy, OnInit } from "@angular/core";
import { ItemEventData } from "tns-core-modules/ui/list-view";
import { SetupItemViewArgs } from "nativescript-angular/directives";
import { mockedDataArray, mockedCounties, Country } from "../mock-dataItems";

@Component({
    moduleId: module.id,
    templateUrl: "./multi-line-big.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MultiLineBigListViewExampleComponent implements OnInit {
    public countries: Array<Country> = [];
    public groupedCountries: Array<any> = [];
    public templateSelector = (item: any, index: number, items: any) => {
        return item.type || "cell";
    }

    ngOnInit() {
        for (let i = 0; i < mockedDataArray.length; i++) {
            this.countries.push(mockedDataArray[i]);
        }

        for (let i = 0; i < mockedCounties.length; i++) {
            this.groupedCountries.push(mockedCounties[i]);
        }
    }

    onItemTapFirstList(args: ItemEventData) {
        console.log(args.index);
    }

    onItemTapSecondList(args: ItemEventData) {
        console.log(args.index);
    }

    onItemTapThirdList(args: ItemEventData) {
        console.log(args.index);
    }

    onSetupItemView(args: SetupItemViewArgs) {
        // further customisation can be achived with SetupItemViewArgs
        // example for creating a variable for each third element
        args.view.context.third = (args.index % 3 === 0);
    }
}