Angular Material: How to set Sidenav/Drawer to be open by default?

Question

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?

---

Answer 1

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: matSidenav

Properties
@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.

Example

<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 official Angular Material Sidenav Examples.

Answer 2

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);
}