I am using the Angular Material Sidenav
component.
When I serve the webpage, the sidebar does not appear (first image).
However, when I resize the browser for a while, the Sidenav
eventually appears (second image with the hamburger icon), which is the desired state.
Why is this? Is there a way to make it appear by default?
Per the Angular Material documentation, the MatDrawer
/ MatSidenav
opened state may be controlled using the property opened
as well as the method open()
.
MatSidenav extends MatDrawer
Selector: mat-sidenav
Exported as: matSidenavProperties
@Input() opened: boolean
- Whether the drawer is opened. We overload this because we trigger an event when it starts or end.Methods
open
- Open the drawer.
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav mode="side" opened="true">
Sidenav content
</mat-sidenav>
<mat-sidenav-content>
<p>The content.</p>
</mat-sidenav-content>
</mat-sidenav-container>
See the officialAngular Material Sidenav Examples .
I noticed this on the default angular material schematic for the sidebar. For some reason the BreakpointObserver
as async didn't seem to work right away for the nav open button. I used breakpointObserver.isMatched()
instead of breakpointObserver.observe()
In component
get isHandset(): boolean {
return this.breakpointObserver.isMatched(Breakpoints.Handset);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.