fix(show-hide): set explicit display fallback for SSR

[CaerusKaru]

In the event that a user specifies two breakpoints with conflicting
show/hide, e.g. fxHide.lt-lg and fxShow.md, fxShow will not be
able to re-enable CSS display, since there's no equivalent to
nulling out the styles, which is what we do when handling it
inline in the browser.

This sets the property to initial in SSR stylesheets only. This
should preserve browser behavior where nulling out the styles still
works.

NOTE: if you have other classes that set the display property of
an element, they may get overridden in SSR only. This is
unavoidable, since getComputedStyle is not available to use in SSR.

Fixes #1250

[sjbeatle]

@CaerusKaru
Hey! Given your note, do you have any suggestions on what to do?

For example:

// Template
<div class="make-me-display-flex" fxHide.xs>Hello World!</div>
// CSS
.make-me-display-flex { display: flex; }

This change now injects and renders the following inline style for all shown breakpoints:

// Rendered HTML
<div class="make-me-display-flex" style="display: initial;">Hello World!</div>

Which kills the CSS display flex :-(

Current workarounds (neither ideal):
A. Wrap the div and apply the directive there <-- preferable of the two

// Template
<div fxHide.xs>
  <div class="make-me-display-flex">Hello World!</div>
</div>

B. If you preempt with your own inline style, flex-layout will recognize and use that <-- double-duty, yuck!

// Template
<div class="make-me-display-flex" style="display: flex;" fxHide.xs>Hello World!</div>

Any advice would be greatly appreciated. Thanks!

[CaerusKaru]

@sjbeatle We've published 9.0.0-beta.31 to revert the change and add this fix.

[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.}