mat-sidenav-container 在 dom 中始终为空

Question

I'm trying to create a sidebar for my angular application using functionality from the @angular/material package.

I've tried out multiple ways to add the sidebar to by application but it remains empty/not showing up.

 <mat-sidenav-container> <mat-sidenav #sidenav> <mat-nav-list> <a mat-list-item > Accounts </a> <a mat-list-item > Create Account </a> <a mat-list-item > Contacts </a> <a mat-list-item > Create Contact </a> <a mat-list-item > Activities </a> <a mat-list-item > Create Activity </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;"> content </div> </mat-sidenav-content> </mat-sidenav-container>

This is the code I'm using in my html template file.

This is the resulting dom:

I have no idea why nothing is there inside the mat-sidenav-container. I'm using angular 9 and created this project with the CLI.

Any help would be appreciated!

Answer 1

Importing BrowserAnimationsModule solved this problem for me.