How to use mat-tab? mat-tab is not a known element error

19
votes

I am trying to use mat-tab. I have added the below code in html

<mat-tab-group>
    <mat-tab label="Tab 1"> <app-latest-article></app-latest-article></mat-tab>
    <mat-tab label="Tab 2">  <app-trending-article></app-trending-article> </mat-tab>
</mat-tab-group>

In ts file 

import {MatTabsModule} from '@angular/material/tabs';

I am getting error

Uncaught Error: Template parse errors:
'mat-tab' is not a known element:
1. If 'mat-tab' is an Angular component, then verify that it is part of this module.
2. If 'mat-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</ngx-tabset> -->

6
angulartypescriptangular-materialmat-tab
Okay i have resolved the error by adding dependencies in app module file. But the mat-tab api doesnt work as expected. I dont know whats wrong. I was just a plain sample example. waste of time .. – Nancy

6 Answers

47
votes

Add the import in your module.ts file and add it to imports (if you use several module.ts files, add it in the one which is responsible for your component).

import { MatTabsModule } from '@angular/material';

@NgModule({
  imports: [
    ...
    MatTabsModule,
    ...
  ],
  declarations: [
    ...
  ],
  providers: []
})

export class AppModule {}
9
votes

For Angular 9+:

import { MatTabsModule } from '@angular/material/tabs';

in app.module.ts

6
votes

I had the same issue. I was getting error 'mat-tab' is not a known element even after importing both modules
The fix for me was
npm install --save @angular/cdk @angular/material

1
votes

None of these solutions worked for me

Keep in mind that @shildmaiden's solution is the most accurate solution. Our scenarios were just slightly different.

In my case, I tried to use mat-tab in a sub module. This means that adding the import to the AppModule like @shildmaiden's suggested in his above solution failed to work for me so I simply implemented his solution in my mySubModuleName.module.ts file instead and then it worked just fine.

For Angular 9+ make sure to use this example unless of course the other answers are edited accordingly:

// Rather use this line:
import { MatTabsModule } from '@angular/material/tabs';
// Instead of this line:
// import { MatTabsModule } from '@angular/material';


@NgModule({
  imports: [
    ...
    MatTabsModule,
    ...
  ],
  declarations: [
    ...
  ],
  providers: []
})

export class MySubModuleName {}
0
votes

It appears for me that is, when CDK and Material are the same version i have the less issues :

"@angular/cdk": "^8.2.3"
"@angular/material": "^8.2.3"
0
votes

If the page using the tab group is not in the declarations of app.module.ts you get the same error. In addition to adding the MatTabsModule to the imports, add your page to the declarations:

import { MatTabsModule } from '@angular/material';
import { YourPage } from './yourpage.ts'

@NgModule({
  imports: [
    ...
    MatTabsModule,
    ...
  ],
  declarations: [
    YourPage
  ],
  providers: []
})

export class AppModule {}