angular - Putting this Android Layout inside a TabView -

this question raised own perspective. how put following android layout eagerly inside out-of-the-box tabview?

android layout generously stacked no update of date: [http://www.nativescriptsnacks.com/snippets/2016/08/30/aosp-messaging-layout.html]

i put specific layout customized data importing 'faker' library, attached here right after, , no data shows on screen in tab view context. when perform injection of data with-out tab view, data appears works perfectly.

so in sense, i'm approaching with: how 1 put above layout inside tabview make correctly run if ever case, mine.

i not need answer links official nativescript document or whatsoever have gone through them deemed appropriate , tested relevant setups over.

i need inspiring inputs corresponding specific question.

hope nativescript team seeing answer.

views.html regarding out-of-the-box tabview, link components show below, referencing android aosp layout:

<tabview #tabview [selectedindex]="tabindex">    <stacklayout *tabitem="{title: 'conversation'}">     <actionbar title="conversation">       <actionitem text="menu" android.position="popup"></actionitem>     </actionbar>      <listview class="threads-list" [items]="conversations">       <template let-item="item">         <gridlayout rows="auto" columns="auto,*" class="threads-wrapper">           <image row="0" col="0" [src]="item.sender.pictureurl"></image>           <stacklayout row="0" col="1" orientation="vertical">             <label [text]="item.sender.name" class="item-title"></label>             <label [text]="item.content"></label>             <label [text]="item.date" class="convo-date"></label>           </stacklayout>         </gridlayout>       </template>     </listview>   </stacklayout>    <stacklayout *tabitem="{title: 'another tab'}">     <label text="content here"></label>   </stacklayout>  </tabview> 

views.component.ts

// should set way? import { component } "@angular/core";  @component({   selector: "views",   templateurl: "views/views.html" }) export class viewscomponent { } 

and conversation.ts containing customised classes purpose:

// these conversation files stack layout data testing purposes export class user {   name: string;   pictureurl: string; }  export class conversation {   sender: user;   content: string;   date: date; }  export class participants {   me: user;   other: user; }  export class convo {   participants: participants;   conversations: array<conversation>; } 

conversation.service.ts imported faker library , configurations:

import { injectable } "@angular/core";  import { user, conversation, participants, convo } "./conversation"; // same level file const faker = require("faker");  @injectable() export class conversationservice {    getconvo(): convo {     const me = {       name: "me",       pictureurl: "https://unsplash.it/100/100?image=790"     };     const other = {       name: faker.name.findname(),       pictureurl: "https://unsplash.it/100/100?image=823"     };      // display me/other data     const conversations = [];     (let = 0; < 5; i++) {       const sender = faker.random.boolean() ? me : other;       const content = faker.lorem.sentence();       const date = faker.date.recent();        conversations.push({         sender: sender,         content: content,         date: date       });     }      const convo = {       participants: {         me: me,         other: other       },       conversations: conversations.sort((a, b) => {         return a.date - b.date;       })     };      return convo;   } } 

and conversation.component.ts, previous 2 files imported:

import { component, oninit } "@angular/core"; import { conversationservice } "../../shared/conversation/conversation.service"; import { user, conversation } "../../shared/conversation/conversation";  @component({   selector: "conversation",   providers: [conversationservice],   templateurl: "views/views.html", // linking tabview template, ok?? }) export class conversationcomponent implements oninit {   public me: user;   public other: user;   public conversations: array<conversation>;   public tabindex: number; // ok??    constructor(private conversationservice: conversationservice) {     // initializing preset data     const convo = conversationservice.getconvo();      this.me = convo.participants.me;     this.other = convo.participants.other;     this.conversations = convo.conversations;     this.tabindex = 0; // landing tab, ok??   }    ngoninit() {     // this.getconvo();   }      /*   // referencing linked aosp layout, how set up?   getconvo() {     this.conversationservice.getconvo().then((conversations) => {       this.conversations = conversations     }).catch(function(error) {       global.tnsconsole.error('error', error)     })   }   */ } 

suggestions?