NativeScript Snacks

        
<ListView id="threadsListView" class="threads-list" [items]="conversations">
    <template let-item="item">
        <GridLayout rows="auto" columns="auto,*" class="threads-list-wrapper">
            <Image row="0" col="0" [src]="item.photo"></Image>
            <StackLayout row="0" col="1" class="" orientation="vertical">
                <Label class="t-large" [text]="item.title"></Label>
                <Label [text]="item.body"></Label>
                <Label [text]="item.date"></Label>
            </StackLayout>
        </GridLayout>
    </template>
</ListView>
		
  

  
.threads-list-wrapper {
    padding: 15;
}

.threads-list-wrapper > Image {
    height: 64;
    width: 64;
    margin-right: 15;
}
   
  

  
import {Component, OnInit} from "@angular/core"
import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router"
import {SMSService} from "~/services/sms.service"



@Component({
	directives: [NS_ROUTER_DIRECTIVES],
	styleUrls: ["pages/sandbox/sandbox.styles.css"],
	templateUrl: "pages/sandbox/sandbox.template.html",
	providers: [SMSService], // this service gets device conversations and contacts
})

export class AddLiveComponent implements OnInit {

	conversations: Array<any> = []

	constructor(
		private smsService: SMSService
	) {}

	ngOnInit() {
		this.getConversations()
	}

	getConversations() {
		this.smsService.getConversations().then((conversations) => {
			this.conversations = conversations
		}).catch(function(error) {
			global.tnsconsole.error('error', error)
		})

	}

}