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

NativeScript Core

Horizontal Scrolling

Horizontal scrolling list

<ScrollView orientation="horizontal" (loaded)="onScrollLoaded($event)" (scroll)="onScroll($event)">
    <StackLayout orientation="horizontal" class="list-group" height="300">
        <GridLayout *ngFor="let country of countries" id="{{ 'id' + country.id }}" (tap)="onTap($event)" rows="*, auto" columns="300" class="list-group-item m-15 active"> 
            <Image row="0" rowSpan="2" [src]="country.data.imageSrc" stretch="aspectFill"></Image>
            <StackLayout row="1" class="list-group-item" opacity="0.7" backgroundColor="gray" color="black">
                <Label class="list-group-item-heading" [text]="country.data.name" opacity="1"  color="white"></Label>
                <Label class="list-group-item-text" [text]="'Continent: '+country.data.continent" opacity="1" color="white"></Label>      

Initializing the data Items

    moduleId: module.id,
    templateUrl: "./horizontal-scrolling.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
export class HorizontalScrollingExampleComponent implements OnInit {
    public countries: Array<any> = [];

    ngOnInit() {
        for (let index = 0; index < mockedDataArray.length; index++) {
            // creating an object with additional id key to re-use as unique id
            this.countries.push({ "data": mockedDataArray[index], id: index });

    onTap(args: EventData) {
        // using the unique id assigned via the view-model

    onScroll(args: ScrollEventData) {
        console.log("scrollX: " + args.scrollX + "; scrollY: " + args.scrollY);

    onScrollLoaded(args) {
        // scroll to specific position of the horizontal scroll list
        let scrollOffset = 330;
        (<ScrollView>args.object).scrollToHorizontalOffset(scrollOffset, true);