Как реализовать перелистываемые сегменты в ionic 3?

Мне нужно реализовать перелистываемые сегменты в приложении ionic 3.

Я использую директивы https://github.com/siddhartha-gupta/ionic-3-swipe-able-segments/tree/develop/src/pages, но получаю следующую ошибку:

<ion-content padding>
 <div [ngSwitch] = "category" swipeSegment [tabsList] = "categories" 
[ERROR ->][(currentTab)] = "category" 
 (tabChanged) = "onTabChanged($event)" class = "swipe-area">
 <ion-list *ngSw"): 
ng:///InvitefriendPageModule/InvitefriendPage.html@60:66
Error: Template parse errors:
Can't bind to 'tabsList' since it isn't a known property of 'div'. ("

<ion-content padding>
 <div [ngSwitch] = "category" swipeSegment [ERROR ->] . 
[tabsList] = "categories" [(currentTab)] = "category" 
(tabChanged) = "onTabChanged($event)" class = "swipe-ar"): 
ng:///InvitefriendPageModule/InvitefriendPage.html@60:42
Can't bind to 'currentTab' since it isn't a known property of 'div'. 
("

Мой код:

В app.module.ts:

import { SwipeSegmentDirective } from '../directives/swipe- segment.directive';

@NgModule({
 declarations: [
  MyApp,
  SwipeSegmentDirective
  // ProgressBarComponent
],

В invivefriend.ts:

export class InvitefriendPage {

public category: string = 'everyone';
public categories: Array<string> = ['everyone', 'group', 'contact', 
'directory']

// tab1Root: any = "EveryonePage";
// tab2Root: any = "GroupPage";
// tab3Root: any = "ContactPage";
// tab4Root: any = "DirectoryPage";
// public categories: Array<string> = ['everyone', 'group', 'contact', 
'directory']

 constructor(public navCtrl: NavController, public navParams: 
  NavParams) {
 }

 ionViewDidLoad() {
  console.info('ionViewDidLoad InvitefriendPage');
 }

 onTabChanged(tabName) {
  this.category = tabName;
 }

В invivefriend.html:

<ion-header>
 <ion-navbar color = "danger">   

    <ion-toolbar class = "toolbar-color myToolbar">
     <ion-segment [(ngModel)] = "category" class = "tabsSeg">

      <ion-segment-button value = "everyone" class = "segBtn tabname 
        active activated">
         Everyone
      </ion-segment-button>
      <ion-segment-button value = "group" class = "segBtn tabname">
        Group
      </ion-segment-button>
      <ion-segment-button value = "contact" class = "segBtn tabname">
        Contact
      </ion-segment-button>
      <ion-segment-button value = "directory" class = "segBtn tabname">
        Directory
      </ion-segment-button>
    </ion-segment>
   </ion-toolbar>
  </ion-navbar>

 </ion-header> 


<ion-content padding>
 <div [ngSwitch] = "category" swipeSegment [tabsList] = "categories" 
  [(currentTab)] = "category" (tabChanged) = "onTabChanged($event)" 
   class = "swipe-area">
  <ion-list *ngSwitchCase = "'everyone'">
   <ion-item>
    Batman Begins
   </ion-item>
   <ion-item>
    Transporter
   </ion-item>
   <ion-item>
    Million Dollar Baby
   </ion-item>
 </ion-list>

 <ion-list *ngSwitchCase = "'group'">
  <ion-item>
    Game of Thrones
  </ion-item>
  <ion-item>
    Daredevil
  </ion-item>
  <ion-item>
    Arrow
  </ion-item>
</ion-list>

<ion-list *ngSwitchCase = "'contact'">
  <ion-item>
    Ice Age
  </ion-item>
  <ion-item>
    Lion King
  </ion-item>
  <ion-item>
    Up
  </ion-item>
 </ion-list>

 <ion-list *ngSwitchCase = "'directory'">
   <ion-item>
    Ice Age1
   </ion-item>
   <ion-item>
    Lion King1
   </ion-item>
   <ion-item>
    Up1
   </ion-item>
  </ion-list>
 </div>
</ion-content>

Мне нужно какое-либо решение для устранения вышеуказанной ошибки, пожалуйста, дайте здесь решение как можно скорее, это было бы очень признательно.