CODEWITHSUNDEEP
angular
aakriti priya
aakriti priya

Reputation: 119

trying to implement a sidenavigation in angular

I have an app.component.ts and i have created a component using ng generate c.That new component is suppose to have a sidenavigation and the side navigation needs to toggle upon a click of button.

I am trying to implement the side navigation menu but i am getting an error like below: "message": "Cannot find module '@angular/material/MatSidenavModule'.",

My navigation.component.html file

<mat-sidenav-container>
    <mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
    <mat-sidenav-content>Main content</mat-sidenav-content>
  </mat-sidenav-container>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatSidenavModule } from '@angular/material/MatSidenavModule';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NavigationComponent } from './navigation/navigation.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    NavigationComponent,

  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MatSidenavModule,

  ],
  exports:[MatSidenavModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 0

Views: 90

Answers (2)

Mridul
Mridul

Reputation: 1366

As per official documentation it should be

import {MatSidenavModule} from '@angular/material/sidenav';

But in your code it is

import { MatSidenavModule } from '@angular/material/MatSidenavModule';

Image

Upvotes: 0

Purushoth.Kesav
Purushoth.Kesav

Reputation: 665

with refrence to https://material.angular.io/components/sidenav/api you have to import MatSidenavModule to your app.module.ts

import {MatSidenavModule} from '@angular/material/sidenav';

For your ref use this example: https://stackblitz.com/angular/vrxballxmbo?file=src%2Fapp%2Fsidenav-drawer-overview-example.ts

Upvotes: 1

Related Questions