🔒 Learn how to create more secure apps at the "Best Practices for Securing Your Mobile Apps" webinar. Register today!

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);
    }
}