<ActionBar title="My App"> </ActionBar>

<GridLayout>
  <ListView [items]="items">
    <ng-template let-item="item">
      <StackLayout [nsRouterLink]="['/item', item.id]">
        <FlexboxLayout justifyContent="flex-start" alignItems="center">
          <Label
            textAlignment="right"
            class="contact-type"
            text="{{ 'Contact' }}"
          ></Label>
          <Label
            textAlignment="right"
            class="contact-name"
            marginLeft="5"
            [text]="item.name"
          ></Label>
        </FlexboxLayout>
      </StackLayout>
    </ng-template>
  </ListView>
</GridLayout>

import { Component, OnInit } from '@angular/core';

import { Item } from './item';
import { ItemService } from './item.service';

@Component({
  selector: 'ns-items',
  styles: `
  .contact-type {
    font-size: 13;
    white-space: normal;
    border-right-color: blue;
    border-right-width: 1;
    padding-right: 5;
  }
  
  .contact-name {
    font-size: 15;
    color: blue;
    white-space: normal;
  }`,
  templateUrl: './items.component.html',
})
export class ItemsComponent implements OnInit {
  items: Array<Item>;

  constructor(private itemService: ItemService) {}

  ngOnInit(): void {
    this.items = this.itemService.getItems();
  }
}