Extending Angular Material2 MdTab component

Question

I'm attempting to extend one of the Material components, MdTabGroup. Everything works fine with the out-of-the box MdTabGroup component - the material library is correctly imported into the module etc.

Here's the extended component:

@Component({
    selector: 'md-custom-tab-group',
    templateUrl: 'custom-tab-group.html',
    ....
})
export class MdCustomTabGroup extends MdTabGroup {
  constructor( private _r : Renderer) {
    super(_r);
  }
}

The new component is imported and declared in the app module, and is created thus:

<md-custom-tab-group>
    <md-tab>one</md-tab>
    <md-tab>two</md-tab>
</md-custom-tab-group>

The template for the custom tab group (custom-tab-group.html) is identical to the one in material, e.g.

<div class="mat-tab-body-wrapper" #tabBodyWrapper>
    <md-tab-body role="tabpanel"
                 *ngFor="let tab of _tabs; let i = index"
                 ...
                 [content]="tab.content"
                 ...>
    </md-tab-body>
</div>

When run, the _tabs ViewChildren collection is getting correctly populated - it consists of the md-tab declarations in the original markup, interpreted as a Material tab component. However, the custom-tab-group.html template is not valid. The template parser now doesn't know what 'md-tab-body' is.

Specifically -

Can't bind to 'content' since it isn't a known property of 'md-tab-body'.

but I don't think it knows what md-tab-body is at all when it picks up the new template.

The question is - how can I correct this behavior and get the extended component working?

Answer 1

Not a good answer but this issue that is being tracked seems to be the root of it.

https://github.com/angular/material2/issues/9216

Once they include MatTabBody, MatTabHeader and MatTabLabelWrapper in the export list you should be able to extend it.