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

NativeScript Core

Two Lines Grouped

Grouped two line items

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

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

    <ng-template nsTemplateKey="cell" 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>

Grouped two line items with separators

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

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

    <ng-template nsTemplateKey="cell" 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>

Grouped two line items with thumbnails

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

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

    <ng-template nsTemplateKey="cell" let-country="item">
        <GridLayout rows="*, *" class="list-group-item" 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="ist-group-item-heading p-15"></Label>
            <Label row="1" col="1" class="list-group-item-text p-15" [text]="'Continent: '+ country.continent"></Label>
        </GridLayout>
    </ng-template>
</ListView>

Initializing the data Items

@Component({
    moduleId: module.id,
    templateUrl: "./grouped-two-lines.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class GroupedTwoLinesListViewExampleComponent implements OnInit {
    public countries: Array<any>;

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

    public templateSelector = (item: any, index: number, items: any) => {
        return item.type || "cell";
    }

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

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

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