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

NativeScript Core

Two Line

Two line items

<ListView class="list-group" [items]="countries" (itemTap)="onItemTapFirstList($event)" separatorColor="white">
    <ng-template let-country="item">
        <StackLayout class="list-group-item">
            <Label class="list-group-item-heading" [text]="country.name"></Label>
            <Label class="list-group-item-text" [text]="'Continent: '+country.continent"></Label>
        </StackLayout>
    </ng-template>
</ListView>

Two line items with separators

<ListView class="list-group" [items]="countries" (itemTap)="onItemTapSecondList($event)" separatorColor="gray">
    <ng-template let-country="item">
        <StackLayout class="list-group-item">
            <Label class="list-group-item-heading" [text]="country.name"></Label>
            <Label class="list-group-item-text" [text]="'Continent: '+country.continent"></Label>
        </StackLayout>
    </ng-template>
</ListView>

Two line items with thumbnails

<ListView class="list-group" [items]="countries" (itemTap)="onItemTapThirdList($event)">
    <ng-template let-country="item">
        <GridLayout class="list-group-item" rows="* *" columns="auto, *">
            <Image row="0" col="0" rowSpan="2" [src]="country.imageSrc" class="thumb img-circle"></Image>
            <Label row="0" col="1" [text]="country.name" class="list-group-item-heading"></Label>
            <Label row="1" col="1" class="list-group-item-text" [text]="'Continent: '+country.continent"></Label>
        </GridLayout>
    </ng-template>
</ListView>

Initializing the data Items

@Component({
    moduleId: module.id,
    templateUrl: "./two-line-listview.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class TwoLineListViewExampleComponent {
    public countries: ObservableArray<any>;

    constructor() {
        this.countries = new ObservableArray(mockedDataArray);
    }

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

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

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