tns-template-master-detail-kinvey-ng/src/app/cars/car-detail-edit/my-list-selector/my-list-selector-modal-view.component.ts

Master-detail interface to display collection of items from Kinvey and inspect and edit selected item properties.

import { Component } from "@angular/core";
import { ModalDialogParams } from "nativescript-angular/modal-dialog";

@Component({
    selector: "MyListSelectorModalView",
    templateUrl: "./my-list-selector-modal-view.component.html",
    styleUrls: ["./my-list-selector-modal-view.component.scss"]
})
export class MyListSelectorModalViewComponent {
    private _items: Array<any>;
    private _selectedIndex: number;
    private _title: string;

    constructor(private _params: ModalDialogParams) {
        this._title = _params.context.title;
        this._selectedIndex = _params.context.selectedIndex;

        this._items = [];
        for (let i = 0; i < _params.context.items.length; i++) {
            this._items.push({
                value: _params.context.items[i],
                isSelected: i === this._selectedIndex ? true : false
            });
        }
    }

    onItemSelected(args): void {
        const oldSelectedItem = this._items[this._selectedIndex];
        oldSelectedItem.isSelected = false;

        const newSelectedItem = this._items[args.index];
        newSelectedItem.isSelected = true;
        this._selectedIndex = args.index;

        this._params.closeCallback(newSelectedItem.value);
    }

    onCancelButtonTap(): void {
        this._params.closeCallback(null);
    }

    get items(): Array<any> {
        return this._items;
    }

    get title(): string {
        return this._title;
    }
}