CODEWITHSUNDEEP
angularangular-material
user10728848
user10728848

Reputation: 133

How do I use mat-sidenav correctly?

I have a simple design with a toolbar and a side navigation bar. As soon as I add the mat-sidenav-container part, it stops previewing the page. What am I doing wrong in relation to the sidenav bar that it isn't working?

This is my app.component.html file. This commented mat-sidenav-container part is not working.

<!-- Toolbar -->
<div class="toolbar" role="banner">
  <img width="70" src="\assets\images\logo.png" />
  <span>FitnessWorkout</span>
    <div class="spacer"></div>
    <span nav-tool-items>
        <button menu-item color="accent" routerLink="/signup">Sign-up</button>
        <button menu-item color="primary" routerLink="/login">Login</button>
        <button menu-item color="warn" (click)="logout()">Log out</button>
      </span>
</div>

<!-- <mat-sidenav-container>
    <mat-sidenav #sidenav>
      <mat-nav-list>
        <a mat-list-item routerLinkActive="active" [routerLink]="'/workout-overview'"> My Workouts </a>
        <a mat-list-item routerLinkActive="active" [routerLink]="'/create-workout'"> Create Workout </a>
        <a mat-list-item (click)="sidenav.toggle()" href="" mat-list-item>Close</a>
      </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
      <div style="height: 88vh;">
        <router-outlet></router-outlet>
      </div>
    </mat-sidenav-content>

  </mat-sidenav-container> -->



<div class="content" role="main">

  <!-- Highlight Card -->
  <img  width="180"  height="100"  src="\assets\images\logo.png"/>
  <p>Welcome to {{title}}</p>

  <!-- Workouts -->
  <h2>Workouts</h2>
  <div class="card-container">
    <a class="card" >
    <a mat-list-item routerLinkActive="active" [routerLink]="'/workout-overview'"> My Workouts </a> <br>
    <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>    </a>
  </div>

  <!-- Next Steps -->
  <h2>Next Steps</h2>
  <p>What do you want to do next with your workout exercises?</p>

  <input type="hidden" #selection>

  <div class="card-container">
    <div class="card card-small" (click)="selection.value = 'component'" tabindex="0">
        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
        <a mat-list-item routerLinkActive="active" [routerLink]="'/create-workout'"> New Workout </a>
    </div>
  </div>

</div>

In the app.module.ts I have the relevant imports, which are placed in a custom module - AngularMaterialModule.

@NgModule({
  declarations: [
    AppComponent,
    CreateWorkoutComponent,
    EditWorkoutComponent,
    LoginComponent,
    SignupComponent,
    WorkoutOverviewComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule, ReactiveFormsModule,
    AngularMaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

EDIT: Added the console output. enter image description here

enter image description here

Upvotes: 3

Views: 1352

Answers (1)

Athanasios Kataras
Athanasios Kataras

Reputation: 26450

You need to Add the BrowseAnimationsModule in your application

// If it's not installed, then save it in your project from your bash
npm install --save @angular/animations

Then in your code (module) import it.

// Import the module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
    ...
    imports:      [    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    AngularMaterialModule,
    // This one here
    BrowserAnimationsModule
    ]                           
    ...
})

Upvotes: 2

Related Questions