CODEWITHSUNDEEP
angulartypescriptangular-materialmat-tab
Nancy
Nancy

Reputation: 1019

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

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

Upvotes: 35

Views: 73943

Answers (7)

Ahmad Habib
Ahmad Habib

Reputation: 2382

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) component.html

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

Cause of error

module.ts (Missing component in declarations array) module.ts

________________________________________________________________________

The fix

module.ts (Fixing the error and indicating with yellow lines) enter image description here

Upvotes: 2

Krishna Ganeriwal
Krishna Ganeriwal

Reputation: 1979

For Angular 9+:

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

in app.module.ts

Upvotes: 23

Martin Dekker
Martin Dekker

Reputation: 230

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

Upvotes: 5

PhillipJacobs
PhillipJacobs

Reputation: 2490

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

Upvotes: 5

CodeM7
CodeM7

Reputation: 113

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"

Upvotes: 0

Kunal Tyagi
Kunal Tyagi

Reputation: 4197

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

Upvotes: 8

shildmaiden
shildmaiden

Reputation: 809

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

Upvotes: 62

Related Questions