angularangular-materialmat-tab

Can't get mat-tab-group to function, it keeps throwing an MatTabHeader._checkPaginationEnabled error


I used the code straight from the Angular Material website [https://material.angular.io/components/tabs/overview], and I believe I followed it slavishly, but clearly I've done something wrong because I can't get it to load, well the mat-tab appears, but the error also appears immediately in the console.

The error Any help GREATLY appreciated.

I followed two different tutorials, and loaded my app.module.ts correctly (I believe) but I'm guessing there is some configuration thing that I don't know about, because nothing I've tried has removed this error.

app.module.ts app.component.html


Solution

  • Ok, discovered the solution (finally), with thanks to Angular CLI throws error: 'mat-tab-nav-panel' is not a known element

    The problem began when I used the ng add command from the Angular Material website: *ng add @angular/material*, and this added the version of Angular Material version 7.0.0 to my project.

    List here:

     @angular-devkit/architect       0.1402.10    
     @angular-devkit/build-angular   14.2.10    
     @angular-devkit/core            14.2.10    
     @angular-devkit/schematics      14.1.3    
     @angular/cli                    14.1.3    
     @angular/material               7.0.0    
     @schematics/angular             14.1.3    
     rxjs                            7.5.7    
     typescript                      4.7.4
    

    Thinking version 7 seems way too old, I then created a fresh Angular project with: *ng new test_4*, went to the NPM website, and—following Benoit's answer—found a version of Angular Material that should work, version 13.3.9, and installed that in my project using: *npm i @angular/material@13.3.9*. The new project's details:

    @angular-devkit/architect       0.1402.10
    @angular-devkit/build-angular   14.2.10
    @angular-devkit/core            14.2.10
    @angular-devkit/schematics      14.1.3
    @angular/cli                    14.1.3
    @angular/material               13.3.9
    @schematics/angular             14.1.3
    rxjs                            7.5.7
    typescript                      4.7.4
    

    Once I did that, mat-tab-group began working fine.

    Hope this may help others as new to Angular as I am.