[MdSidenav] - Sidenav Resizing Regression

Bug, feature request, or proposal:

Bug/Regression from 2.0.0-beta.8.

Also a feature request for an API to allow triggering recalculations for the MdSidenavContainer/MdDrawerContainer, or being able to update _styles manually and having the view update…

What is the expected behavior?

In the previous release 2.0.0-beta.8 the sidenav resized when the window was resized.

I have a responsive sidenav that uses Angular flex-layout for showing/hiding responsive content in the sidenav when the view changes from md to lg and vice-versa.

What is the current behavior?

In 2.0.0-beta.10 this is no longer the case. The changes made in #6189 made the sidenav update only when the sidenav is opening/closing.

Since flex-layout’s changes occur without having to call open() or close() on the sidenav, the width recalculation doesn’t occur.

What are the steps to reproduce?

Put dynamic/responsive content within a sidenav that is configured with “side”.

What is the use-case or motivation for changing an existing behavior?

Being able to dynamically call a refresh of the MdSidenav/MdDrawer or MdSidenavContainer/MdDrawerContainer.

Even better would be an accessor to allow manually setting the margin of the sidenav to allow for pre-computing the _style variable and updating it when needed.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.3.5 Angular Material 2.0.0-beta.10

Is there anything else we should know?

This is similar to #6583.

For right now I am using the following hack in my navigation directive to workaround whenever the ObservableMedia from angular flex-layout changes:

// Timeout required for flex-layout directives to update the child views/the width.
setTimeout(() => {
            (this._container as any)._updateStyles();
            (this._container as any)._changeDetectorRef.markForCheck();
}, 0);

[mmalerba]

I definitely think we need to do something about this, even if its just making some of these methods public so people can trigger update manually. Raising the priority.

[ghwyf]

Here is my solution: HTML

<md-sidenav-container #container>
    <md-sidenav  mode="side" opened="{{showMenu}}" class="shadow"></md-sidenav>
    <div class="my-content"></div>
</md-sidenav-container>

TS

export class MyComponent implements OnInit, AfterViewInit {
    @ViewChild('container') private _container;
    public showMenu: boolean = false;
    ...
    ngAfterViewInit() {
      setTimeout(()=>{
        this.showMenu = true;
      },0);
      this._container._ngZone.onMicrotaskEmpty.subscribe(() => {
        this._container._updateStyles();
        this._container._changeDetectorRef.markForCheck();
      })
    };
    ...
}