angulartypescriptangular-materialmat-tab

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

Solution

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