import {Component, Template, Parent} from 'angular2/angular2' import {View, Tabs, Tab, Aside, Content, NavPane} from 'ionic2/ionic2' @Component({ selector: 'tabs-page' }) @Template({ url: 'pages/tabs.html', directives: [Tabs, Tab, View, Content] }) export class TabsPage { constructor() { this.tab1Initial = Tab1Page1 this.tab2Initial = Tab2Page1 } } // // tab 1 // @Component({ selector: 't1p1' }) @Template({ inline: `

Tab 1 Page 1.

`, directives: [View, Content] }) class Tab1Page1 { constructor(navPane: NavPane) { this.navPane = navPane } next() { this.navPane.push(Tab1Page2) } } @Component({ selector: 't1p2' }) @Template({ inline: `

Tab 1 Page 2.

`, directives: [View, Content] }) class Tab1Page2 { constructor(navPane: NavPane) { this.navPane = navPane } pop() { this.navPane.pop() } } // // tab 2 // @Component({ selector: 't2p1' }) @Template({ inline: ` Left aside for Tab 2 Page 1

Tab 2 Page 1.


I have got an aside on the left.
`, directives: [View, Aside, Content] }) class Tab2Page1 { constructor(navPane: NavPane) { this.navPane = navPane } next() { this.navPane.push(Tab2Page2) } } @Component({ selector: 't2p2' }) @Template({ inline: ` Left aside for Tab 2 Page 2 Nested Tab 1, static content Nested Tab 2, static content `, directives: [View, Aside, Tabs, Tab, Content] }) class Tab2Page2 { constructor(navPane: NavPane) { this.navPane = navPane } pop() { this.navPane.pop() } }