🤖 Create an engaging chatbot from scratch and add it to your NativeScript app! Learn more at our webinar on March 28th.

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