Creating Tabs in sidemenu ionic projects

Hi there.
    After searching web for couple of hours, i couldn't find any easy solutions for making some tabs in ionic side-menu project. i have solved my problem and now i am sharing my experience with you so that you can use it in your projects and save your time.

If you are working in your ionic side-menu project and you feel that if you can insert tabs in your projects. You need the following easy steps

• I am targeting my home View, to have tabs. You may insert in any page you want . just go to the .ts of that page and insert the following lines. In my case it is home.ts
• import { Component, ViewChild } from '@angular/core';

  import { NavController, Slides } from 'ionic-angular';

  
  

  @Component({

  selector: 'page-home',

  templateUrl: 'home.html'

  })

  export class HomePage {

  @ViewChild(Slides) slides: Slides;

  text:string;

  title:any;

  tvChannels:any;

  tvDramas:any;

  
  
  

  constructor(public navCtrl: NavController) {

  this.text = "text to be changed";

  this.title = "green";

  this.tvChannels = true;

  this.tvDramas = false;

  }

  
  
  

  goToSlide() {

  this.slides.slideTo(0, 1000);

  }

  
  
  

  slideChanged(){

  this.text = "Pakistan";

  console.log("changed");

  let currentIndex = this.slides.getActiveIndex();

  if( currentIndex == 0){

  console.log("the value of tv cahnnels true"+ currentIndex);

  this.tvDramas = false;

  this.tvChannels = true;

  }

  if( currentIndex == 1){

  console.log("the value of tv cahnnels false"+ currentIndex);

  this.tvChannels = false;

  this.tvDramas = true;

  }

  console.log('Current index is', currentIndex);

  }

  }
• in your page with .html format insert the following code....
• 
  
  

  <ion-header class="header">

  <ion-navbar>

  <button ion-button menuToggle>

  <ion-icon name="menu"></ion-icon>

  </button>

  <ion-title>LiveNetTv<span class="search"><img style="height: auto;width: 16%;" src="assets/imgs/dashBoard/search-icon.png" alt=""></span><span class="calendar-search"><img style="height: auto;width: 20%;" src="assets/imgs/dashBoard/calendar-icon.png" alt=""></span> <span class="gear-search"><img style="height: auto;width: 28%;" src="assets/imgs/dashBoard/gear-icon.png" alt=""></span></ion-title>

  </ion-navbar>

  </ion-header>

  
  
  

  <ion-content padding>

  <ion-card>

  <span style="margin-left:16%;"><h1 *ngIf="this.tvChannels == true; then templateNamech else dimch"></h1>

  <ng-template #templateNamech> <span style="color:red;">Tv Channels</span></ng-template>

  <ng-template #dimch> <span style="color:rgb(15, 1, 1);" (click) = "goToSlide()">Tv Channels</span></ng-template>

  &nbsp;&nbsp;|&nbsp;&nbsp;<h1 *ngIf="this.tvDramas == true; then templateNamedr else dim"></h1>

  <ng-template #templateNamedr> <span style="color:red;">Tv Dramas</span></ng-template>

  <ng-template #dim> <span style="color:rgb(15, 1, 1);">Tv Dramas</span></ng-template> </span>

  <ion-slides (ionSlideDidChange)="slideChanged()" >

  <ion-slide no-padding>

  <ion-grid>

  <ion-row>

  <ion-col col-4><div class="channelDiv"><img src="assets/imgs/dashBoard/Arynews.jpg" alt=""></div></ion-col>

  <ion-col col-4><div class="channelDiv"><img style="background-color:red;" src="assets/imgs/dashBoard/apna-tv.png" alt=""></div></ion-col>

  <ion-col col-4><div class="channelDiv"><img src="assets/imgs/dashBoard/bol.png" alt=""></div></ion-col>

  </ion-row>

  
  
  

  <ion-row>

  <ion-col col-4><div class="channelDiv"><img style="background:rgb(14, 159, 216);" src="assets/imgs/dashBoard/duniya.png" alt=""></div></ion-col>

  <ion-col col-4><div class="channelDiv" style=""><img src="assets/imgs/dashBoard/QTV.png" alt=""></div></ion-col>

  <ion-col col-4><div class="channelDiv"><img src="assets/imgs/dashBoard/ptvsports.png" alt=""></div></ion-col>

  </ion-row>

  
  
  

  <ion-row>

  <ion-col col-4><div class="channelDiv"><img src="assets/imgs/dashBoard/geo-news.png" alt=""></div></ion-col>

  <ion-col col-4><div class="channelDiv"><img src="assets/imgs/dashBoard/aryzooq.jpg" alt=""></div></ion-col>

  <ion-col col-4><div class="channelDiv"><img src="assets/imgs/dashBoard/jaag.jpg" alt=""></div></ion-col>

  </ion-row>

  
  
  

  <ion-row>

  <ion-col col-4><div class="channelDiv"><img src="assets/imgs/dashBoard/ch24news.jpg" alt=""></div></ion-col>

  <ion-col col-4><div class="channelDiv" ><img src="assets/imgs/dashBoard/atv-logo.jpg" alt=""></div></ion-col>

  <ion-col col-4><div class="channelDiv"><img src="assets/imgs/dashBoard/ary-digital.jpg" alt=""></div></ion-col>

  </ion-row>

  <ion-row>

  <ion-col col-4><div class="channelDiv"><img src="assets/imgs/dashBoard/ajj.png" alt=""></div></ion-col>

  <ion-col col-4><div class="channelDiv" ><img src="assets/imgs/dashBoard/AAG_TV_Logo.png" alt=""></div></ion-col>

  <ion-col col-4><div class="channelDiv"><img src="assets/imgs/dashBoard/bol.png" alt=""></div></ion-col>

  </ion-row>

  </ion-grid>

  </ion-slide>

  <ion-slide>

  <h1>Slide 2</h1>

  </ion-slide>

  </ion-slides>

  </ion-card>

  </ion-content>

  
  
• Thats it. please let me know. how you find it...