html - Change the content for each tab Angular 2 -

i'm using segmentedbar tabs. , menu.html file looks this:

<stacklayout orientation="vertical" width="310" height="610">   <nav>   <h1 class="title">hello world</h1>   <segmentedbar #tabs [items]="items" [selectedindex]="selectedindex" ></segmentedbar>   </nav> </stacklayout> 

1. the problem if modify it, nothing seems happen on ui. shows tabs, that's it, i.e. 'hello world' doesn't show on interface. want modify html, there other actions happen. why happening?
2. how can change views, there different views each tab?

and here menu.component.ts file:

import {component, oninit, ondestroy, afterviewinit, viewchild, elementref} '@angular/core'; import {page} 'ui/page'; import {segmentedbar, segmentedbaritem, selectedindexchangedeventdata} 'ui/segmented-bar';  @component({     selector: 'tabs',     templateurl:"./components/menu/menu.html"  })  export class tabscomponent implements oninit, ondestroy, afterviewinit {     selectedindex: number;     items: array<any>;      @viewchild("tabs") tabs: elementref; // equal getviewbyid() in nativescript core      constructor(private page: page) {         this.selectedindex = 0;         this.items = [{ title: 'home' }, { title: 'g+' }, { title: 'sync' }];     }     ngoninit() {      }      ngafterviewinit() {         this.tabs.nativeelement.on(segmentedbar.selectedindexchangedevent, (args: selectedindexchangedeventdata) => {             switch (args.newindex) {                 case 0:                     console.log('home selected')                     break;                 case 1:                     console.log('g+ selected')                     break;                 case 3:                     console.log('sync selected')                     break;             }         })     }     ngondestroy() { } } 

you can't use dom in nativescript meaning can not use browser specific tags h1, ul, li, div, etc.. if want own tags can achieve integrating third-party components.

the segmented bar different tabview - not provide content space segmented bar. should use selectedindex modify page depending on it.

here simple implementation on how change content based on user selection (it demonstration- there many better solutions. example use partial views a.k.a. custom components , declare boolean variable visibility change)

app.component.html

<stacklayout orientation="vertical" width="310" height="610">   <segmentedbar #tabs [items]="items" [selectedindex]="selectedindex" ></segmentedbar>    <gridlayout #firsttabcontent width="300" height="500" backgroundcolor="orange" fontsize="40">         <label text="first" textwrap="true"></label>   </gridlayout>    <gridlayout #secondtabcontent width="300" height="500" backgroundcolor="red" fontsize="40">         <label text="second" textwrap="true"></label>   </gridlayout>    <gridlayout #thirdtabcontent width="300" height="500" backgroundcolor="green" fontsize="40">         <label text="third" textwrap="true"></label>   </gridlayout>     </stacklayout> 

app.component.ts

import {component, oninit, ondestroy, afterviewinit, viewchild, elementref} '@angular/core';  import {page} 'ui/page'; import {segmentedbar, segmentedbaritem, selectedindexchangedeventdata} 'ui/segmented-bar';  @component({     selector: 'tabs',     templateurl: 'app.component.html' }) export class tabscomponent implements oninit, ondestroy, afterviewinit {     selectedindex: number;     items: array<any>;      messages: array<any>;      @viewchild("tabs") tabs: elementref;      @viewchild("firsttabcontent") firsttabcontent: elementref;     @viewchild("secondtabcontent") secondtabcontent: elementref;     @viewchild("thirdtabcontent") thirdtabcontent: elementref;      constructor(private page: page) {         this.selectedindex = 0;         this.items = [{ title: 'first' }, { title: 'second'},  { title: 'third'}];     }      ngoninit() {         // initial load setup         this.firsttabcontent.nativeelement.visibility = "visible";         this.secondtabcontent.nativeelement.visibility = "collapsed";         this.thirdtabcontent.nativeelement.visibility = "collapsed";     }      ngafterviewinit() {         this.tabs.nativeelement.on(segmentedbar.selectedindexchangedevent, (args: selectedindexchangedeventdata) => {             switch (args.newindex) {                 case 0:                     console.log('first selected');                      this.firsttabcontent.nativeelement.visibility = "visible";                     this.secondtabcontent.nativeelement.visibility = "collapsed";                     this.thirdtabcontent.nativeelement.visibility = "collapsed";                     break;                 case 1:                     console.log('second selected')                      this.firsttabcontent.nativeelement.visibility = "collapsed";                     this.secondtabcontent.nativeelement.visibility = "visible";                     this.thirdtabcontent.nativeelement.visibility = "collapsed";                     break;                 case 2:                     console.log('third selected')                      this.firsttabcontent.nativeelement.visibility = "collapsed";                     this.secondtabcontent.nativeelement.visibility = "collapsed";                     this.thirdtabcontent.nativeelement.visibility = "visible";                     break;             }         })     }      ngondestroy() { } }