Listpicker

The ListPicker is a spinner type component for listing options.

Usage

<ListPicker [items]="years" selectedIndex="0" (selectedIndexChange)="onSelectedIndexChanged($event)"></ListPicker>

import { Component } from "@angular/core";
import { EventData } from "tns-core-modules/data/observable";
import { ListPicker } from "tns-core-modules/ui/list-picker";

@Component({
    moduleId: module.id,
    templateUrl: "./usage.component.html"
})
export class ListPickerUsageComponent {
    public years: Array<number> = [1980, 1990, 2000, 2010, 2020];

    public onSelectedIndexChanged(args: EventData) {
        const picker = <ListPicker>args.object;
        console.log(`index: ${picker.selectedIndex}; item" ${this.years[picker.selectedIndex]}`);
    }
}

Styling

<ListPicker [items]="items" class="picker"></ListPicker>

.picker {
    background-color: blanchedalmond;
    color: red;
    border-color: brown;
    border-radius: 20;
    border-width: 2;
    width: 200;
    height: 100;
    vertical-align: middle;
}

Properties

Events

API References

Native Component