1
votes

I have a problem with angular material tabs, my project is angular 9. I created child module named it account inside it I created component named account-layout

this is account-layout.component.html

    <div style="padding-top: 64px;">
    <p>account-layout works</p>
    <mat-tab-group>
        <mat-tab label="First"> Content 1 </mat-tab>
        <mat-tab label="Second"> Content 2 </mat-tab>
        <mat-tab label="Third"> Content 3 </mat-tab>
    </mat-tab-group>
</div>

and this account-layout.component.ts

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

@Component({
  selector: 'app-account-layout',
  templateUrl: './account-layout.component.html',
  styleUrls: ['./account-layout.component.scss']
})
export class AccountLayoutComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

and this is account.module.ts

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { AccountLayoutComponent } from './account-layout/account-layout.component';
    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { MatTabsModule } from '@angular/material/tabs';



@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    MatTabsModule
  ],


  declarations: [
    AccountLayoutComponent
  ],
})
export class AccountModule { }

now , I have this error error NG8001: 'mat-tab-group' is not a known element: 1. If 'mat-tab-group' is an Angular component, then verify that it is part of this module.

please help me Thanks.

2

2 Answers

1
votes

my problem is fixed I forgot to import account-layout.module.ts in app.module.ts

0
votes

The fix for me was

npm install --save @angular/cdk @angular/material

then rerun ur app with ng serve