Angular Materials Tab Groups not importing-CodePudding

I am trying to set up a mat-tab-group with angular materials.

Errors:

Compiled with problems:
ERROR

../../app.module.ts:28:5 - error NG2011: The component 'MatTab' appears in 'imports', but is not standalone and cannot be imported directly. It must be imported via an NgModule.

28     MatTab,
       ~~~~~~

ERROR

../../app.module.ts:29:5 - error NG2011: The component 'MatTabGroup' appears in 'imports', but is not standalone and cannot be imported directly. It must be imported via an NgModule.

29     MatTabGroup
       ~~~~~~~~~~~

My HTML code on my myTab-group.component.html

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

my app.component.html code

<app-myTab-group></app-myTab-group>

Here is the weird part I have MatTab and MatTabGroups imported in app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatCardModule } from '@angular/material/card';
import {  MatButtonModule } from '@angular/material/button'
import { MatTab, MatTabGroup} from '@angular/material/tabs'

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MainCardComponent } from './panel/main-card/main-card/main-card.component';
import { PanelHeaderComponent } from './panel/panel-header/panel-header.component';
import { PanelTabsComponent } from './panel/panel-tabs/panel-tabs/panel-tabs.component';


@NgModule({
  declarations: [
    AppComponent,
    MainCardComponent,
    PanelHeaderComponent,
    PanelTabsComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatButtonModule,
    MatTab,
    MatTabGroup
    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And when i remove the import it fails to compile because of problems in the html file

CodePudding user response：

you will need to import MatTabsModule instead of MatTab, MatTabGroup something like

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

then in imports

 imports: [
...otherimports,
   MatTabsModule
  ],