I am working on my angular project and on a specific section, I need to implement Material Tab Nav Bar (as shown working on tab material component page).

Here's the HTML:

<nav mat-tab-nav-bar [tabPanel]="tabPanel">
<a mat-tab-link (click)= "SomeMethod()" > Office </a>
<a mat-tab-link (click)= "SomeOtherMethod()" > NHIU </a>
<a mat-tab-link (click)= "AnotherMethod()" > TIU </a>
</nav>

<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>

The < nav mat-tab-nav-bar > works fine without the [tabPanel] directive and without the <mat-tab-nav-panel #tabPanel>

But when using tab panel and nav panel, angular cli throws following errors:

error NG8002: Can't bind to 'tabPanel' since it isn't a known property of 'nav'.

< nav mat-tab-nav-bar [tabPanel]="tabPanel" >

1. If 'mat-tab-nav-panel' is an Angular component, then verify that it is part of this module.
2. If 'mat-tab-nav-panel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

error NG8001: 'mat-tab-nav-panel' is not a known element:

1. If 'mat-tab-nav-panel' is an Angular component, then verify that it is part of this module.
2. If 'mat-tab-nav-panel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

<mat-tab-nav-panel #tabPanel></ mat-tab-nav-panel>

I have already imported MatTabsModule in my material module and vanilla mat-tabs also works fine in the project.

Cannot understand what the problem is here. Please help.

CodePudding user response：

mat-tab-nav-panel is a component introduced in AngularMaterial v13.2.0 . Are you sure your current version of AngularMaterial is above 13.2 ?