Nativescript - ListPicker and Slider

Question

I’m using Nativescript with Angular to build for Android and iOS. I want to know how to use the tag i.e. how do I add items to select to the ListPicker as well as how the code would look in my ts file to capture the input from the ListPicker.

I also would like to know how to use the tag and to display the current value of the Slider and what my ts file would look like to capture input from the Slider. I have a tag set up as follows: but the Slider does not behave as if it is moving in 0.25 increments but in whole number increments i.e. 1 to 2 and 2 to 3.

Thanks for any help.

Answer 1

You could use the two way binding of the ListPicker to access the selectedIndex of the picker. Simply use the angular 2 two way binding syntax [(ngModel)] and set it to a number property of your component:

<ListPicker [items]="locations" [(ngModel)]="selectedLocationIndex"></ListPicker>

and here is an example of the code behind of such angular component:

import { Component, OnInit } from "@angular/core";
import { ObservableArray } from "data/observable-array";
import { DataService } from "../data.service";
import * as DependencyObservableModule from "ui/core/dependency-observable";
import * as ProxyModule from"ui/core/proxy";

@Component({
    moduleId: module.id,
    selector: "my-component",
    providers: [DataService],
    templateUrl: MyComponent.html',
    styleUrls: ["MyComponent.css"]
})
export class MyComponent extends DependencyObservableModule.DependencyObservable implements OnInit {
    private static selectedLocationIndexProperty = new DependencyObservableModule.Property(
        "selectedLocationIndex",
        "MyComponent",
        new ProxyModule.PropertyMetadata(
            undefined,
            DependencyObservableModule.PropertyMetadataSettings.None,
            MyComponent.onSelectedLocationIndexPropertyChanged));
    private static locationsProperty = new DependencyObservableModule.Property(
        "locations",
        "MyComponent",
        new ProxyModule.PropertyMetadata(
            undefined,
            DependencyObservableModule.PropertyMetadataSettings.None));
    private static currentLocationroperty = new DependencyObservableModule.Property(
        "currentLocation",
        "MyComponent",
        new ProxyModule.PropertyMetadata(
            undefined,
            DependencyObservableModule.PropertyMetadataSettings.None));

    constructor(private _dataService: DataService) {
        super();
    }

    ngOnInit() {
        this.locations = new ObservableArray(this._dataService.getDrawerLocations());
        this.currentLocation = SideDrawerLocation.Left;
        this.selectedLocationIndex = 0;
    }

    get selectedLocationIndex(): number {
        return this._getValue(MyComponent.selectedLocationIndexProperty);
    }

    set selectedLocationIndex(value: number) {
        this._setValue(MyComponent.selectedLocationIndexProperty, value);
    }

    get locations(): ObservableArray<SideDrawerLocation> {
        return this._getValue(MyComponent.locationsProperty);
    }

    set locations(value: ObservableArray<SideDrawerLocation>) {
        this._setValue(MyComponent.locationsProperty, value);
    }

    get currentLocation(): SideDrawerLocation {
        return this._getValue(MyComponent.currentLocationroperty);
    }

    set currentLocation(value: SideDrawerLocation) {
        this._setValue(MyComponent.currentLocationroperty, value);
    }

    private static onSelectedLocationIndexPropertyChanged(args) {
        var myComp: MyComponent = args.object;
        myComp.onSelectedLocationIndexChanged(args);
    }

    private onSelectedLocationIndexChanged(args) {
        this.currentLocation = this.locations.getItem(this.selectedLocationIndex);
    }
}

This code snippet is taken from this example from the nativescript-ui-samples-angular github repo, you can find a lot of useful examples there.