Angular Extension Material2 MdTab Component

Question

I am trying to extend one of the components of Material, MdTabGroup. Everything works fine with the ready-made 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);
  }
}

A new component is imported and declared in the application module and created in this way:

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

The template for the user group of tabs ( custom-tab-group.html) is identical to the template specified in the material, for example.

<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 launched, the _tabsViewChildren collection becomes correctly populated - it consists of declarations md-tabin the original markup, interpreted as a component of the Material tab. However, the template is custom-tab-group.htmlnot valid. The template analyzer now does not know what md-tab-body is.

In particular -

"", "md-tab-body".

, , md-tab-body, .

: ?

Answer 1

, , , .

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

MatTabBody, MatTabHeader MatTabLabelWrapper .