Listpicker

Spinner type module with listed options. Using a ListPicker requires the "ui/list-picker" module.

API Reference for ListPicker Class

Native Component

Android iOS
android.widget.NumberPicker UIPickerView

Image

Creating Listpicker

HTML

<ListPicker [items]="pokemons" selectedIndex="0" (selectedIndexChange)="selectedIndexChanged($event)" class="p-15"></ListPicker>

TypeScript

import { Component } from "@angular/core";
import { ListPicker } from "ui/list-picker";

let pokemonList = ["Bulbasaur", "Parasect", "Venonat", "Venomoth", "Diglett",
    "Dugtrio", "Meowth", "Persian", "Psyduck", "Arcanine", "Poliwrath", "Machoke"];

@Component({
    moduleId: module.id,
    templateUrl: "./creating-listpicker.component.html"
})
export class CreatingListPickerComponent {

    public pokemons: Array<string>;
    public picked: string;

    constructor() {
        this.pokemons = [];

        for (let i = 0; i < pokemonList.length; i++) {
            this.pokemons.push(pokemonList[i]);
        }
    }

    public selectedIndexChanged(args) {
        let picker = <ListPicker>args.object;
        console.log("picker selection: " + picker.selectedIndex);

        this.picked = this.pokemons[picker.selectedIndex];
    }
}

Improve this document

Demo Source


Using Selected Index

HTML

<StackLayout row="0">
        <Label text="Use the slider to change ListPicker's selectedIndex" textWrap="true" class="h3 p-15 text-left"></Label>
        <Slider [minValue]="0" [maxValue]="pokemons.length - 1" [(ngModel)]="index" class="slider"></Slider>
</StackLayout>
<ListPicker row="1" [items]="pokemons" [selectedIndex]="index" (selectedIndexChange)="selectedIndexChanged($event)" class="p-15 picker"></ListPicker>

TypeScript

import { Component } from "@angular/core";
import { ListPicker } from "ui/list-picker";

let pokemonList = ["Bulbasaur", "Parasect", "Venonat", "Venomoth", "Diglett",
"Dugtrio", "Meowth", "Persian", "Psyduck", "Arcanine", "Poliwrath", "Machoke"];

@Component({
    moduleId: module.id,
    templateUrl: "./using-selected-index.component.html"
})
export class UsingSelectedIndexExampleComponent {
    public pokemons: Array<string>;
    public index: number;

    constructor() {
        this.pokemons = [];

        for (let i = 0; i < pokemonList.length; i++) {
            this.pokemons.push(pokemonList[i]);
        }
    }

    public selectedIndexChanged(args) {
        let picker = <ListPicker>args.object;
        console.log("picker selection: " + picker.selectedIndex);
    }
}

Improve this document

Demo Source


Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.