Can't use material tabs

Question

I was excited to find about the material tabs stuff at https://material.angular.io/components/tabs/api#MatTab and was excited to use it in my project.

I added the import as suggested and it wasn't working. I found: can not find module "@angular/material" and imported the stuff and got the import working on my maintab component.

But the mat-tab links are still not working. So here's my maintab.component.ts

import { Component, OnInit } from '@angular/core';
import {MatTabsModule} from '@angular/material';

@Component({
  selector: 'app-maintab',
  templateUrl: './maintab.component.html',
  styleUrls: ['./maintab.component.css']
})
export class MaintabComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

And here's my maintab.component.html

<mat-tab-group>
  <mat-tab label="One">
    <h1>Some tab content</h1>
    <p>...</p>
  </mat-tab>
  <mat-tab label="Two">
    <h1>Some more tab content</h1>
    <p>...</p>
  </mat-tab>
</mat-tab-group>

I'm still getting these type of errors:

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. ("<mat-tab-group>
  [ERROR ->]<mat-tab label="One">
    <h1>Some tab content</h1>
    <p>...</p>
"): ng:///AppModule/MaintabComponent.html@1:2
'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. ("
    <p>...</p>
  </mat-tab>

I just don't know what to do next.

Figured all of this out. Wrote http://www.heavyweightsoftware.com/blog/how-to-use-tabs-with-angular-5/ with a walkthrough to save future people problems. — Thom, Jan 23 '18 at 08:25

score 2 · Accepted Answer · answered Jan 20 '18 at 15:56

2

The problem is you're importing a module into a component. You need to import the MatTabsModule into your AppModule, and also include it as a provider. As long as your MaintabComponent is declared in your App module this will work.

If your MaintabComponent isn't declared in your AppModule you need to import the MatTabsModule and provide in the module where it is declared instead of the AppModule.

(If you're still having trouble please include code for your module that this component is declared in for further help)

answered Jan 20 '18 at 15:56

Z. Bagley

8,942
1
40
52

You don't have to add the module as a provider. – Edric Jan 22 '18 at 06:16
1

I ran into several issues and finally figured it out. I wrote an article: http://www.heavyweightsoftware.com/blog/how-to-use-tabs-with-angular-5/ to walk someone through this process. – Thom Jan 23 '18 at 08:25

score 0 · Answer 2 · answered Dec 04 '19 at 07:55

0

I had the same issue. I was getting errors because MatTabModule was in node_modules
To solve this, Go to command prompt and type
npm install --save @angular/cdk @angular/material

answered Dec 04 '19 at 07:55

Kunal Tyagi

2,341
1
15
26

score 0 · Answer 3 · answered Aug 04 '20 at 10:56

0

For me I added MatTabsModule into exports array instead of imports then it worked.

answered Aug 04 '20 at 10:56

Wasim

600
2
11
32

Can't use material tabs

3 Answers3