@nativescript/template-master-detail-ng/src/app/cars/car-list.component.html

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

<ActionBar>
  <NavigationButton ios:visibility="collapsed"></NavigationButton>
  <Label text="Browse" horizontalAlignment="center"></Label>
</ActionBar>

<GridLayout>
  <RadListView [items]="cars" (itemTap)="onCarItemTap($event)" class="cars-list">
    <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">
              <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">
              <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>
              <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>