material angular sidenav trigger resize

Question

I'm using angular 8 and material theme. Following https://material.angular.io/components/sidenav/overview

I'm generating the content inside <mat-sidenav> </mat-sidenav> dynamically by user input.

When I toggle the status, it automatically resizes the content. For example, when I first opened it is like this.

When I change the content inside the sidenav to a longer content, It DOES NOT resizes.

Maybe I can trigger it by opening and closing the sidenav. Is there a function to trigger resize?

In the docs I see

@Input() autosize: boolean Whether to automatically resize the container whenever the size of any of its drawers changes. Use at your own risk! Enabling this option can cause layout thrashing by measuring the drawers on every change detection cycle. Can be configured globally via the MAT_DRAWER_DEFAULT_AUTOSIZE token.

I don't want to use autosize.

note:

setTimeout(() => this.isOpen = false, 0);
setTimeout(() => this.isOpen = true, 1);

works fine expect for focusing on the menu button.

SteveC SteveC · Accepted Answer · 2020-05-04T09:23:00

The trick is to set autosize to true when you know you are going to change the size of the sidenav and turn it off once the resizing is complete.

autosize: boolean = false;

doSomethingToChangeSidenavWidth() {
  // do something...
  // ...then
  this.autosize = true;
  setTimeout(() => this.autosize = false, 1);
}

<mat-sidenav-container class="example-container" [(autosize)]="autosize">

material angular sidenav trigger resize

1 Answers