Inheriting from Ionic 2 Tabs clas - how?

Ionic Framework ionic-v3
1

Since i want to slightly extend the behaviour of tabs in Ionic 2 I came to the idea to inherit from the class and build my own directive like this:

import { Component, ViewEncapsulation, Optional, ElementRef, Renderer } from '@angular/core';

import { Badge, Icon, Tab, Tabs, NavController, ViewController, App, Config, Platform } from 'ionic-angular';
import { TabHighlight } from 'ionic-angular/components/tabs/tab-highlight';
import { TabButton } from 'ionic-angular/components/tabs/tab-button';


@Component({
  selector: 'tabs-with-swipe',
  templateUrl: 'build/components/tabs-with-swipe/tabs-with-swipe.html',
  directives: [Badge, Icon, TabButton, TabHighlight, Tabs, Tab],
  providers: [Tabs]
  , encapsulation: ViewEncapsulation.None,
})
export class TabsWithSwipe extends Tabs {

  text: string;

  constructor(
    @Optional() parent: NavController,
    @Optional() public viewCtrl: ViewController,
    private app: App,
    private config: Config,
    elementRef: ElementRef,
    private platform: Platform,
    private renderer: Renderer
  ) {
    super(parent, viewCtrl, app, config, elementRef, platform, renderer);
  }

  
  private get tabs() : Tab[] {
    let result : Tab[] = [];
 
    let n = super.length(); 
    console.log("---> number of tabs: ", n);

    for (let i : number = 0; i < n; i++) {
      result.push(super.getByIndex(i));
    }
    return result;
  }
  
}

The template looks like this:

<ion-tabbar role="tablist" #tabbar>
  <a *ngFor="let t of tabs" [tab]="t" class="tab-button" [class.tab-disabled]="!t.enabled" [class.tab-hidden]="!t.show" role="tab"
    href="#" (ionSelect)="select($event)">
    <ion-icon *ngIf="t.tabIcon" [name]="t.tabIcon" [isActive]="t.isSelected" class="tab-button-icon"></ion-icon>
    <span *ngIf="t.tabTitle" class="tab-button-text">{{t.tabTitle}}</span>
    <ion-badge *ngIf="t.tabBadge" class="tab-badge" [ngClass]="'badge-' + t.tabBadgeStyle">{{t.tabBadge}}</ion-badge>
    <ion-button-effect></ion-button-effect>
  </a>
  <tab-highlight></tab-highlight>
</ion-tabbar>
<ng-content></ng-content>
<div #portal tab-portal></div>

and I use it like this:

<tabs-with-swipe>
  <ion-tab *ngFor="let tab of tabs" [root]="tab.root" [tabTitle]="tab.title" [tabIcon]="tab.icon"></ion-tab>
</tabs-with-swipe>

using the information in tha tabs member of the tabs compoenent. Alas I see a white page and no exceptions. What went wrong? What am I missing?

The debugger shows super._tabs is empty …

2

Did you get it? Thank you.