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
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> | <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...