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

Question

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> -->

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, May 03 '18 at 08:34

score 60 · Accepted Answer · answered May 25 '18 at 13:15

60

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 {}

answered May 25 '18 at 13:15

shildmaiden

769
10
16

this has changed in angular 9+ – crh225 Mar 18 '20 at 14:55
13

the `MatTabsModule` has to be imported as `import { MatTabsModule } from '@angular/material/tabs';` in 9+ – riyasyash Aug 20 '20 at 11:43

score 20 · Answer 2 · edited Mar 11 '22 at 12:09

20

For Angular 9+:

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

in app.module.ts

edited Mar 11 '22 at 12:09

freedev

25,946
8
108
125

answered Jun 16 '20 at 06:13

Krishna Ganeriwal

1,903
19
17

score 8 · Answer 3 · answered Dec 04 '19 at 08:00

8

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

answered Dec 04 '19 at 08:00

Kunal Tyagi

2,341
1
15
26

score 5 · Answer 4 · answered Aug 21 '20 at 18:07

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 {}

Martin Dekker · Answer 5 · 2021-08-17T14:25:06.057

5

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.component'

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

export class AppModule {}

edited Aug 17 '21 at 14:25

answered May 16 '21 at 11:13

Martin Dekker

190
1
7

This worked for me. Tq – Kodali444 Feb 02 '22 at 18:13

score 1 · Answer 6 · answered Jul 13 '22 at 13:38

Posting just in case this helps anyone

All of the above solutions are accurate but I faced a slightly different issue.

In my case, I forgot to add my component in the declarations array and I was using mat-tab inside that component which was causing the issue.

I added the route for that component but forgot to add it in declarations.

Below was what I did wrong:

Here are my component files with errors in the terminal:

component.html (Everything is fine here but the terminal shows an error)

routing.module.ts (Everything is fine here but the terminal shows an error)

Cause of error

module.ts (Missing component in declarations array)

________________________________________________________________________

The fix

module.ts (Fixing the error and indicating with yellow lines)

score 0 · Answer 7 · answered Jun 26 '20 at 11:25

0

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"

answered Jun 26 '20 at 11:25

CodeM7

93
2
12

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

7 Answers7

None of these solutions worked for me

Linked