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

NativeScript Core

Single Line

Single 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>
        </StackLayout>
    </ng-template>
</ListView>

Single 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>
        </StackLayout>
    </ng-template>
</ListView>

Single line items with thumbnails

<ListView class="list-group" [items]="countries" (itemTap)="onItemTapThirdList($event)">
    <ng-template let-country="item">
        <FlexboxLayout flexDirection="row" class="list-group-item">
            <Image [src]="country.imageSrc" class="thumb img-circle"></Image>
            <Label [text]="country.name" class="list-group-item-heading" verticalAlignment="center"></Label>
        </FlexboxLayout>
    </ng-template>
</ListView>

Initializing the data Items

@Component({
    moduleId: module.id,
    templateUrl: "./single-line-listview.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class SingleLineListViewExampleComponent implements OnInit {
    public countries: Array<Country> = [];

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

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

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

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