tns-template-master-detail-kinvey-ng/src/app/cars/car-list.component.html

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

<ActionBar>
    <!-- Should remove the navigation button -->
    <NavigationButton ios:visibility="collapsed"></NavigationButton>
    <Label text="Browse" horizontalAlignment="center"></Label>
</ActionBar>

<GridLayout>
    <RadListView [items]="cars" (itemTap)="onCarItemTap($event)" class="cars-list">
    <!--
    RadListView is a UI component part of the Progress NativeScript UI set of components.
    Learn more about the RadListView UI component and how it can be customized in this documentation article:
    https://docs.nativescript.org/angular/ui/professional-ui-components/ng-ListView/getting-started
    This component is used to display the master list in the master-detail structure.
    -->
        <ng-template tkListItemTemplate let-car="item">
            <StackLayout class="cars-list__item">
                <GridLayout rows="*, *, *" columns="*, *" class="cars-list__item-content">
                    <Label [text]="car.name" class="cars-list__item-name font-weight-bold"></Label>
                    <Label col="1" horizontalAlignment="right" class="m-r-5">
                        <FormattedString>
                            <Span text="&euro;"></Span>
                            <Span [text]="car.price"></Span>
                            <Span text="/day"></Span>
                        </FormattedString>
                    </Label>

                    <StackLayout row="1" class="hr m-y-5" colSpan="2"></StackLayout>

                    <Image row="2" [src]="car.imageUrl" stretch="aspectFill" height="120" class="m-r-20"></Image>
                    <StackLayout row="2" col="1" verticalAlignment="center">
                        <Label class="p-b-10">
                            <!-- set fontFamily="system" to workaround "Service exited due to Segmentation fault: 11" error -->
                            <FormattedString ios:fontFamily="system">
                                <Span text="&#xf1b9;    " class="fas cars-list__item-icon"></Span>
                                <Span [text]="car.class"></Span>
                            </FormattedString>
                        </Label>
                        <Label class="p-b-10">
                            <!-- set fontFamily="system" to workaround "Service exited due to Segmentation fault: 11" error -->
                            <FormattedString ios:fontFamily="system">
                                <Span text="&#xf085;   " class="fas cars-list__item-icon"></Span>
                                <Span [text]="car.transmission"></Span>
                                <Span text=" Transmission"></Span>
                            </FormattedString>
                        </Label>
                        <Label>
                            <!-- set fontFamily="system" to workaround "Service exited due to Segmentation fault: 11" error -->
                            <FormattedString ios:fontFamily="system">
                                <Span text="&#xf2dc;    " class="fas cars-list__item-icon"></Span>
                                <Span [text]="car.hasAC ? 'Yes' : 'No'"></Span>
                            </FormattedString>
                        </Label>
                    </StackLayout>
                </GridLayout>
            </StackLayout>
        </ng-template>
    </RadListView>

    <ActivityIndicator [busy]="isLoading"></ActivityIndicator>
</GridLayout>