fxHide doesn't work on page load

[srcn]

Bug Report

What is the expected behavior?

fxHide must hide the content on page load.

What is the current behavior?

It doesn't work as expected on page load.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-gqvksp

<div fxHide fxShow.gt-sm>

  <div fxLayout="row" fxLayoutAlign="start center" fxFlex="0 1 auto">

      This content doesn't get hidden on small screen size!

  </div>
  
</div>

There is no fxLayout on the parent element, and because of that, fxFlex puts display: flex to the parent item in order to work correctly and that overrides the display: none from fxHide.

If I put fxLayout="row" to the parent element, fxHide works as expected. It also works correctly when resizing the window.

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

It's a bug.

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

flex-layout 6.0.0-beta.17 & beta.18, Angular 6.x, Chrome (MacOS), Firefox (MacOS) & Safari (MacOS)

Is there anything else we should know?

Related issues: #812 , #814

[KevinToala]

I have the same error

[CaerusKaru]

This is a very unfortunate issue, not just because of the UX, but because it's a tricky fix. We have a case of competing directives, each with their own stake on the CSS display property: fxFlex and fxLayout each want display: flex, and fxShow and fxHide each want display: none or to set the display back to what it should be. There will need to be a design on the best way to regulate this, which I'll start working on. I apologize for the inconvenience in the meantime.

[CaerusKaru]

I think I've got this patched in #881. Please build to make sure. If I don't hear back either way in the next week, I'll push it to the nightly builds (since it's not that far ahead of NPM, it shouldn't impact too many if it breaks something).