Ionic2/Angular2 - How to swipe (right and left) between views/pages and tabs?

Question

I am willing to implement a swipe right/left gesture between tabs/pages, like the one here:

https://camo.githubusercontent.com/90e2e5abbe8155744d579951b93a1260edef855e/687474703a2f2f692e696d6775722e636f6d2f7a6c66574461312e676966

Also available on GitHub through this link (for iOS)

https://github.com/cwRichardKim/RKSwipeBetweenViewControllers

Another example, but that one was made based on Ionic1:

www.ionic-sarav.rhcloud.com/ionic/tabbedSlideBox/slidingTabsUsingRepeat.html

Anyone knows how to achieve that in Ionic2/Angular2? If you can share even just an idea, steps to achieve the same, it'll be very helpful!

Answer 1

I did this manually by importing "ViewChild" from '@angular/core' and "Slides" from 'ionic-angular' `

So you need to have your [HTML] code in the following way:

<ion-segment [(ngModel)]="query" (ionChange)="showdata()">
  <ion-segment-button value="slide1">
    TabTitle1
  </ion-segment-button>
  <ion-segment-button value="slide2">
     TabTitle2
  </ion-segment-button>
  <ion-segment-button value="slide3">
     TabTitle3
  </ion-segment-button>
</ion-segment> 
<ion-slides (ionSlideDidChange)="slideChanged()">
  <ion-slide>
    Some Content
  </ion-slide>
  <ion-slide>
    Some Content
  </ion-slide>
  <ion-slide>
    Some Content
  </ion-slide>
</ion-slides>

Now let me share my Typescript code

import { Component,ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

export class MainPage {

@ViewChild(Slides) slides: Slides;
public query : string = 'slide1';

showdata(){
  if(this.query == 'slide1')
  {
    this.slides.slideTo(0,0);
  }
  if(this.query == 'slide2')
  {      
    this.slides.slideTo(1,0);
  }
  if(this.query == 'slide3')
  {     
    this.slides.slideTo(2,0);
  }
}
// showdata() function ends here !!!

slideChanged(){
    if(this.slides._activeIndex == 0){
        this.query = 'slide1';
    }
    if(this.slides._activeIndex == 1){
        this.query = 'slide2';
    }
    if(this.slides._activeIndex == 2){
        this.query = 'slide3';
    }
}

Bit Change in CSS too:

.swiper-slide {
    overflow-y: scroll;
    display: block;
}

Thats it...Happy coding...!!!