ngStyle not being inlined for SSR

[rkajbaf]

Bug Report

The SSR docs suggest we inline all flex related styles so that they will work in SSR. This works for flexHide/flexShow etc but does not appear to work for ngStyle.

What is the expected behavior?

ngStyle.xs, etc styles are also inlined using media queries similarly to fxHide.

What is the current behavior?

ngStyle is ignored on SSR.

What are the steps to reproduce?

Providing a StackBlitz (or similar) is the best way to get the team to see your issue.

Hard to give a StackBlitz since its an SSR related issue, but anything like this

[ngStyle.xs]="{'margin-top': '56px'}" does not make it into the SSR rendered version.

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

SSR should look like regular version, or as close as possible.

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

 Angular 6.0.7
 Material 6.3.1
 WIndows 10
 TypeScript 2.7.2`

Is there anything else we should know?

No

[rkajbaf]

@CaerusKaru thanks!

[Antti-Kaikkonen]

ngClass seems to have the same issue.

[CaerusKaru]

@Antti-Kaikkonen as mentioned briefly in the SSR design doc, there is no solution for using NgClass on the server. This is because it's impossible to "toggle" classes based on static media query generation.

NgStyle, on the other hand, should work, since it's just appending those styles to the right style block.

PS If you think you have a solution to the NgClass issue, I'd be more than happy to discuss design/review a PR.

EDIT: For posterity, one possible implementation solution for ngClass is to alias it on the server to mean ngStyle.<bp> && ngShow.<bp> for all breakpoints, and insert more DOM nodes to cover the spread. These would then have to be cleaned up in the browser. There are possible performance/correctiveness issues especially if the nodes have children.

[CaerusKaru]

This may be patched in #900. @rkajbaf can I count on you to verify once it lands?

[CaerusKaru]

This wasn't patched by #900 but will be patched in #962, and will be included in the beta 23 release some time next month.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}