docs-bug(mat-tab-nav-panel): Documentation implies that [tabPanel] is optional, but must be specified.

[yutamago]

Documentation Feedback

The documentation implies that [tabPanel] can be left unprovided by saying "If not provided, then the nav bar follows the ARIA link / navigation landmark pattern".

However, if left unprovided, it will throw an error stating: "A mat-tab-nav-panel must be specified via [tabPanel]".

Affected documentation page

https://material.angular.io/components/tabs/api#MatTabNav

[epelc]

Please fix this. We have been using a standalone tab panel for navigation ie footer of our app for years. We use in combination with router links to go between pages when you click or activate a tab.

Looks like just these lines need to be removed.

https://github.com/angular/components/blob/1fcdc27f4660b5295aedbbff355d7ae6e844c737/src/material/tabs/tab-nav-bar/tab-nav-bar.ts#L383-L388

The rest of the component works with an optional tabPanel.

[epelc]

@wagnermaciel would you accept a PR for changes described in my comment?

It's common to use tabs as nav.

[muenchto]

I agree with @epelc, these line should be removed to fit the documentation. Also, more complicated Apps can easily create a situation where the mat-tab-nav-panel is wrapped by some header component. In this case, providing the tabPanel via an Input does not work because of Angular's CD resolution and throws an ExpressionChangedAfterItHasBeenCheckedError. Bug reported in https://github.com/angular/components/issues/28379

[EliezerB123]

Does anyone know of any workaround to force [tabPanel] to be optional?

We don't want to use [tabPanel] style tabs, because it'll cause us a lot of accessibility problems. (For example, the z-index is set to -1 on all tabs, instead of 0. As well, our mat-tab-nav-panel is buried deep in a component, and providing it with a tabPanel that includes the router-outlet is... difficult.)

[tonybaroneee]

+1 to everything above. @EliezerB123 I believe the workaround here is to simply have an empty mat-tab-nav-panel:

<nav mat-tab-nav-bar [tabPanel]="tabPanel">
    <a mat-tab-link ...>Link 1</a>
    ...
</nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>

That will appease the error while not requiring you to change your page structure/rendering behavior.