tab-view-items.component.ts

// >> add-items-code
import { Component } from "@angular/core";
import { StackLayout } from "ui/layouts/stack-layout";
import { Label } from "ui/label";
import { TabView, SelectedIndexChangedEventData } from "ui/tab-view";

@Component({
    moduleId: module.id,
    templateUrl: "./tab-view-items.component.html",
})
export class TabViewItemsComponent {
    public tabviewitems: Array<any>;

    constructor() {
        this.tabviewitems = [];
      
        let firstInner = StackLayoutInner("Tab1", "15", "Label first page");
        let secondInner = StackLayoutInner("Tab2", "15", "Label second page");
        let thirdInner = StackLayoutInner("Tab3", "15", "Label third page");

        this.tabviewitems.push(fistInner.getInnerStackLayout());
        this.tabviewitems.push(secondInner.getInnerStackLayout());
        this.tabviewitems.push(thirdInner.getInnerStackLayout());

    }

    public tabViewIndexChange(res) {
        alert("Tab View selected index: " + res);

    }
}
// << add-items-code
      
      
export class StackLayoutInner{
      
  let innerStackLayout = new StackLayout();
  let label = new Label();
  let title:string;
      
  constructor(title:string, margin:string, txt:string){
      this.title = title;
      this.label.margin = margin;
      this.label.text = txt;
      this.innerStackLayout.addChild(this.label);    
  }
      
  getInnerStackLayout(){
      return {"title": this.title, "view": this.innerStackLayout} ;
  }
}