I have a problem with angular 9 mat-tab-group

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.

Continue reading...