How to extend ionic2 tab component?

Question

Getting started on Ionic2 which is based on Angular2 and I'm currently trying to extend the base tab component to add an extra input. The point is to sort a list of models into tabs by an attribute. My class is the following:

import {Component, Directive, Host, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, NgZone, Renderer} from 'angular2/angular2';
import {IonicApp, Config, Keyboard, NavController, ViewController, Tabs, Tab} from 'ionic/ionic';

@Component({
    selector: 'list-tab',
    inputs: [
        'root',
        'tabTitle',
        'tabIcon'
    ],
    host: {
        '[class.show-tab]': 'isSelected',
        '[attr.id]': '_panelId',
        '[attr.aria-labelledby]': '_btnId',
        'role': 'tabpanel'
    },
    template: '<template #contents></template>'
})
export class ListTab extends Tab {
    constructor(
        @Host() parentTabs: Tabs,
        app: IonicApp,
        config: Config,
        keyboard: Keyboard,
        elementRef: ElementRef,
        compiler: Compiler,
        loader: DynamicComponentLoader,
        viewManager: AppViewManager,
        zone: NgZone,
        renderer: Renderer
    ) {
        super(parentTabs, app, config, keyboard, elementRef, compiler, loader, viewManager, zone, renderer);
    }
}

I then try using it as a normal tab :

<ion-tabs>
    <list-tab *ng-for="#tab of tabs" tab-title="{{tab.title}}" tab-icon="{{tab.icon}}" [root]="tab.component"></list-tab>
</ion-tabs>

But it displays the following error :

Error: Cannot resolve all parameters for ListTab(Tabs @Host() @Host(), IonicApp, Config, ?, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, NgZone, Renderer). Make sure they all have valid type or annotations.
    at NoAnnotationError.BaseException [as constructor] (http://localhost:8100/build/js/app.bundle.js:26209:24)
    at new NoAnnotationError (http://localhost:8100/build/js/app.bundle.js:27069:17)
    at _extractToken (http://localhost:8100/build/js/app.bundle.js:26183:16)
    at http://localhost:8100/build/js/app.bundle.js:26135:46
    at Array.map (native)
    at Array.map (http://localhost:8100/build/js/app.bundle.js:1158:15)
    at _dependenciesFor (http://localhost:8100/build/js/app.bundle.js:26135:20)
    at resolveFactory (http://localhost:8100/build/js/app.bundle.js:26015:25)
    at Object.resolveProvider (http://localhost:8100/build/js/app.bundle.js:26039:67)
    at Function.DirectiveProvider.createFromProvider (http://localhost:8100/build/js/app.bundle.js:36482:30)

I've tried different ways of getting Keyboard to import correctly as it seems it doesn't recognize it's annotation, but nothing seems to correct the error. Is this a framework bug which wouldn't be surprising since we're in alpha, or am I doing something wrong?

Thanks

Answer 1

Try my code, works on 2.0.0-beta.3

import {Tab, Config} from "ionic-angular";
import {Keyboard} from "ionic-angular/util/keyboard";
import {Component, Inject, forwardRef, ElementRef, Compiler, AppViewManager, NgZone, Renderer, ViewEncapsulation} from 'angular2/core';
import {ShiftingTabs} from './tabs';
import {IonicApp} from "ionic-angular";

@Component({
  selector: 'shifting-tab',
  inputs: [
      'root',
      'tabTitle',
      'tabIcon'
  ],
  host: {
    '[class.show-tab]': 'isSelected',
    '[attr.id]': '_panelId',
    '[attr.aria-labelledby]': '_btnId',
    'role': 'tabpanel'
  },
  template: '<div #contents></div>',
  encapsulation: ViewEncapsulation.None
})
export class ShiftingTab extends Tab {
  constructor(
    @Inject(forwardRef(() => ShiftingTabs)) parentTabs: ShiftingTabs,
    app: IonicApp,
    config: Config,
    keyboard: Keyboard,
    elementRef: ElementRef,
    compiler: Compiler,
    viewManager: AppViewManager,
    zone: NgZone,
    renderer: Renderer
  ) {
      super(
        parentTabs, app, config, keyboard, elementRef, compiler,
        viewManager, zone, renderer
      );
  }
}

example of use:

<ion-tabs tabbarPlacement="top">
  <shifting-tab [root]="tab1Root" tabTitle="Test1"></shifting-tab>
</ion-tabs>