Angular Material Tabs not working with wrapper component

Question

We are developing a corporate component library which should provide Material Designed Angular Components. So the users of this library are not supposed to use e.g. Angular Material directly but rather include some component like "custom-tabs".

Using the components of MatTabModule directly works like a charm, whereas when using our custom components the projected content does not show up.

Usage looks very similar to the Angular Material API:

<custom-tabs>
  <custom-tab [label]="labelA">Content A</custom-tab>
  <custom-tab [label]="labelB">Content B</custom-tab>
  <custom-tab [label]="labelC">Content C</custom-tab>
</custom-tabs>

The custom components try to project the content as follows:

<!-- custom-tabs template -->
<mat-tab-group>
  <ng-content></ng-content>
</mat-tab-group>

<!-- custom-tab template -->
<mat-tab [label]="label">
  <ng-content></ng-content>
</mat-tab>

Does anyone have an idea how we can get it working?

I provided a StackBlitz where you can see the problem in action.

For a start, the label input on your `mat-tab` component in `custom-tab` should have square brackets for binding. — Edric, Feb 17 '18 at 16:50
@Edric Fair enough, although it won't get me closer to the solution of my problem unfortunately. ;) — Robert Gruner, Feb 18 '18 at 23:16
@dtodt Yes, just check the updated [StackBlitz](https://stackblitz.com/edit/angular-material2-custom-tabs). — Robert Gruner, Jun 11 '18 at 16:22
@RobertGruner It would be awesome if you would post the running code from StackBlitz as an answer. — sloth, Oct 25 '19 at 13:52

score 9 · Answer 1 · answered Apr 28 '20 at 19:26

9

material has changed the var names, so in the solution

tabs -> _allTabs

tabGroup -> _tabBodyWrapper

answered Apr 28 '20 at 19:26

Phil Baird

91
1
1

1

You are a hero. Beer is on me – raphisama Mar 12 '21 at 20:22

score 5 · Accepted Answer · edited Mar 12 '21 at 09:09

5

I think the issue you have is the same described in this github issue: https://github.com/primefaces/primeng/issues/1215

Basically the problem here is that ng-content does not provide @ContentChild when crossing component boundaries.

You can see that mat-tab uses @ContentChild: https://github.com/angular/components/blob/master/src/material/tabs/tab.ts#L56

So I think the only solution is to override it programmatically the way it is described in primeng issue.

edited Mar 12 '21 at 09:09

raphisama

396
3
11

answered Mar 08 '18 at 11:39

Dariusz Ostolski

462
3
10

Thanks a lot for the link! Guess we will try the suggestion anytime soon. – Robert Gruner Mar 13 '18 at 17:49
1

Really got it working this way. Thanks a alot @dariusz-ostolski! I updated the [StackBlitz](https://angular-material2-custom-tabs.stackblitz.io) to show how it works. The trick is the AfterViewInit part in CustomTabsComponent. Don't know if this is the most elegant solution but it works for now. – Robert Gruner Jun 11 '18 at 16:06
I get the following error for this solution: No provider for InjectionToken MAT_TAB_GROUP! Anyone knows how to fix it? – Aleksa Mar 21 '22 at 16:09

Angular Material Tabs not working with wrapper component

2 Answers2

Linked