dimanche 5 juillet 2020

how exactly should i import MatDrawer and MatDrawerContainer in app.module.ts? angular 9

i was tring to use angular material to open a side nav when i click on the tool bar icon. everything works fine until i try to actualy open the nav bar, i got the error:

Unexpected directive 'MatDrawer in @angular/material/sidenav/index.d.ts' imported by the module 'AppModule in /src/app/app.module.ts'. Please add a @NgModule annotation.

here are the npm modules (package.json):

"@angular/animations": "^9.1.11",
"@angular/cdk": "^9.2.4",
"@angular/common": "~9.1.11",
"@angular/compiler": "~9.1.11",
"@angular/core": "~9.1.11",
"@angular/forms": "~9.1.11",
"@angular/material": "^9.2.4",
"@angular/platform-browser": "~9.1.11",
"@angular/platform-browser-dynamic": "~9.1.11",
"@angular/router": "~9.1.11",
"jQuery": "^1.7.4",
"jquery": "^3.5.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"

here is my app.module:

 import { MatDrawer } from '@angular/material/sidenav';
import { MatDrawerContainer } from '@angular/material/sidenav';

@NgModule({
  declarations: [
    AppComponent,
    DressesComponent,
    LoadingSpinnerComponent,
    Toolbar,
    ButtonToggle,
    Sidenav
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatTableModule,
    MatSelectModule,
    MatDialogModule,
    MatInputModule,
    MatToolbarModule,
    MatIconModule,
    MatButtonToggleModule,
    MatDrawer,
    MatDrawerContainer
  
  ],
  providers: [DressesService, SidenavService],
  bootstrap: [AppComponent]
})
export class AppModule { }

and app.component.html:

<html dir="rtl" lang="he">
    <toolbar></toolbar>
    <side-nav></side-nav>
</html>



Aucun commentaire:

Enregistrer un commentaire