Fullscreen the Material Sidenav Container

Scenario

We want our mat-sidenav-container to cover the entire screen.

Approach

Use the fullscreen directive.

<mat-sidenav-container fullscreen>

Demo

Try removing fullscreen and see what happens:

Bonus

Complete markup that can be used inside a custom component replacing mat-sidenav-container:

<mat-sidenav-container fullscreen>
<ng-content></ng-content>
</mat-sidenav-container>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation