add <ion-tab> to specific view - ionic-framework

Question

I'm new to ionic. I have a component called firstPage, this has a normal html view.
<ion-header>
<ion-navbar >
<ion-title align="center">first.</ion-title>
</ion-navbar>
</ion-header>
<button ion-button
block
color="primary"
[navPush]="second">
Ir página 2 navPush.
</button>
</ion-content>
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { secondPage} from '../index.paginas';
#Component({
selector: 'page-first',
templateUrl: 'first.html',
})
export class firstPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
second:any=secondPage;
}
and I have another component called secondPage.
<ion-header>
<ion-navbar>
<ion-title align-title="center">second</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
esta es la segunda XDDD
<button ion-button block color="primary" navPop>back</button>
<!--<page-tabs></page-tabs>-->
</ion-content>
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { firstPage, Tab1Page,Tab2Page} from '../index.paginas';
#Component({
selector: 'page-second',
templateUrl: 'second.html',
})
export class secondPage {
Tab1Page,Tab2Page // are the component that has html and .ts
tab1: any;
tab2: any;
constructor() {
this.tab1 = Tab1Page;
this.tab2 = Tab2Page;
}
}
firstPage has a button to navigate directly to secondPage, but I want SecondPage to contain :
<ion-tabs color="primary" selectedIndex="1">
<ion-tab tabIcon="hammer" tabTitle="Tab2" [root]="tab1">tab1</ion-tab>
<ion-tab tabIcon="hammer" tabTitle="Tab1" [root]="tab2">tab2</ion-tab>
</ion-tabs>
I want the second page to load the tabs only in this view
how can I do it?

Answer 1

Add tabs to second-page.html.
<ion-tabs color="primary" selectedIndex="1">
<ion-tab tabIcon="hammer" tabTitle="Tab2" [root]="tab1"></ion-tab>
<ion-tab tabIcon="hammer" tabTitle="Tab1" [root]="tab1"></ion-tab>
</ion-tabs>
Your SecondPage.ts class is OK. Only thing you need to do is add below code to your html which related with your Tab2Page.ts.
<ion-content padding>
esta es la segunda XDDD
<button ion-button block color="primary" navPop>back</button>
</ion-content>
I created a demo for you. find it here