MatDrawer breaks inside ng-content and ngIf

[dfreier]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

mat-drawer with mode=side and opened=true should render drawer and content next to each other (side-by-side)

What is the current behavior?

The mat-drawer-content element "overlays" mat-drawer and takes full container width under the following conditions:

• mat-drawer-container is in template of Component1 and passed as content-child into another component (Component2)
• Component2 has a ng-content tag within it's template and the ng-content tag is wrapped into a container div
• The container div has an ngIf directive which evaluates false initially and then becomes true after some time.

What are the steps to reproduce?

Notice how the text inside mat-drawer-content is not visible, since it is hidden behind mat-drawer: https://stackblitz.com/edit/angular-khyg2w

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

My Component2 equivalent is a layout component which has a header element and a wrapper for a content element which should be rendered only if some condition is true. In this case i want to pass a mat-drawer-container as content.

So basically the use-case is "MatDrawer with content-projection and structural directives".

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

Angular 6.1.3 Material 6.4.6 Tested on Windows with Chrome, Firefox and IE11

[geromegrignon]

Check your stackblitz link, it doesn't show the bug.

[dfreier]

Sorry, my mistake. Pasted the correct stackblitz link now.

[josephperrott]

It looks like the drawer is determining its sizing before being placed in the DOM so its initial state is incorrect.

[Maximaximum]

Any progress on this? I'm facing the same issue. Is there a usable workaround available?

[Maximaximum]

It looks like this issue was caused by the same reasons: https://github.com/angular/components/issues/15292