Components: [Sidenav] Not opened for server-side render

Created on 13 Dec 2017 · 9Comments · Source: angular/components

Bug, feature request, or proposal:

bug

What is the expected behavior?

sidenav being opened when rendered on server. Here is my usage:

... <mat-sidenav [opened]="true"></mat-sidenav> ...

It works on browser but not on server side rendering.

What is the current behavior?

It renders closed.

What are the steps to reproduce?

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

SSR

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

Angular CLI: 1.5.4
Node: 6.9.1
OS: win32 x64
Angular: 5.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cdk: 5.0.0-rc.2
@angular/cli: 1.5.4
@angular/flex-layout: 2.0.0-beta.10-4905443
@angular/language-service: 4.4.6
@angular/material: 5.0.0-rc.2
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.21
@angular-devkit/schematics: 0.0.37
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.4
@schematics/angular: 0.1.7
typescript: 2.4.2
webpack: 3.8.1

P2 materiasidenav regression

Source

alirezamirian

👍9

Most helpful comment

Tried to workaround this by doing something like: [style.margin-left.px]="isHandset ? 0 : 200" but the null removes it from universal but you can get away with it if you add some styles:

<mat-sidenav-content [ngClass]="{ mobile: isHandset }">

mat-sidenav-content {
  margin-left: 200px;

  &.mobile {
    margin-left: 0;
  }
}

Our widths are dynamic as they come from the CMS so it's not ideal but better than nothing!

intellix on 26 Oct 2019

👍2

All 9 comments

@andrewseguin Hi, any updates on this? In my case it's not working with Angular 5.2.8 and material 5.2.4

agustinhaller on 13 Mar 2018

This was fixed, but based on @agustinhaller's comment from #6865 it sounds like maybe there was a regression at some point.

Hi, any updates on this? In my case it was working OK with Angular 5.0.2 and material 5.0.0.rc0 but stop working when updated to Angular 5.2.8 and material 5.2.4

mmalerba on 15 Mar 2018

@crisbeto could you take a look? Got an escalation on this one

jelbourn on 5 Apr 2018

Still not resloved :( This make the sidenav rather unusable if using Universal.

fazpu on 27 Jun 2018

👍1

This appears to have been caused by a bug in @angular/animations that should have recently been fixed in Angular's master.

jelbourn on 27 Jun 2018

Still waiting... any ideas when could be solved?
thanks

mario-merino on 9 May 2019

👍2

Tried to workaround this by doing something like: [style.margin-left.px]="isHandset ? 0 : 200" but the null removes it from universal but you can get away with it if you add some styles:

<mat-sidenav-content [ngClass]="{ mobile: isHandset }">

mat-sidenav-content {
  margin-left: 200px;

  &.mobile {
    margin-left: 0;
  }
}

Our widths are dynamic as they come from the CMS so it's not ideal but better than nothing!

intellix on 26 Oct 2019

👍2

I'm facing a similar issue. The sidenav renders open, but no margin is applied to the mat-drawer-content.

<mat-drawer-content class="mat-drawer-content" style="margin-left:;margin-right:;">

chenlijun99 on 19 Apr 2020

I ran into this in Angular 9 & 10 still. For me the sidenav renders over the content panel, when it's supposed to be on the side.

As a workaround, I'll probably add a class to mat-sidenav-content when isPlatformServer(this.platformID) to adjust margin-left. It's kind of a pain though because we have a couple different size left panels that I'll have to handle.

any other workarounds?