Extending Tabs

Ionic Framework ionic-v3
1

So I’m a touch confused, I am trying to extend one of the existing components for a project, ion-tabs, and have run into an error which I both do and don’t understand.

Currently I have the following template:

<div class="tabbar" role="tablist" #tabbar>
      <a *ngFor="let t of _tabs" [tab]="t" class="tab-button" role="tab" href="#" (ionSelect)="select(t)"></a>
      <div class="tab-highlight"></div>
    </div>
    <ng-content></ng-content>
<div #portal tab-portal></div>

Now this is not mine, this is pulled from https://github.com/ionic-team/ionic/blob/v3.9.2/src/components/tabs/tabs.ts and the associated class is:

import { Component } from '@angular/core';
import { Tabs, RootNode, Tab  } from 'ionic-angular';
import { ViewEncapsulation, forwardRef } from '@angular/core';
@Component({
  selector: 'extended-tab',
  templateUrl: 'extended-tab.html',
  encapsulation: ViewEncapsulation.None,
  providers: [{provide: RootNode, useExisting: forwardRef(() => Tabs) }]
})
export class ExtendedTabComponent extends Tabs {
}

It all transpiles fine, but when it gets to running I run into the following error:

Can’t bind to ‘tab’ since it isn’t a known property of ‘a’.

Now I understand the error logically, yes hyperlink elements (a) do not have any attribute called tabs which can be bound to, that is understandable and fair. The issue I run into is why this code then is on the repo and why does it work there but not in such a simple example :confused:

Being frank, I am not sure why they would want to bind [tab] to the object t, I am assuming this is something akin to binding to [root] but that is guessing. Any information or hints as to how I can get this working would be much appreciated.