Was fxShow and fxHide designed to work with gd?

[RyanTibbetts-OnScale]

Bug Report

What is the expected behavior?

fxShow and fxHide with responsive tags should hide or show elements.

What is the current behavior?

So I'm not certain if this was the intention, but it looks like when setting fxShow or fxHide with responsive tags that gd overwrites or overrides the display: none; set by fxShow and fxHide.

What are the steps to reproduce?

To replicate what I'm seeing, simply take my code below (since the Stack Blitz doesn't work right now) and put it into any existing angular project using angular flex layout. When you're at screen size gt-sm you'll see three blocks for each case: the blocks in a gd and the blocks not in a gd. They are roughly identical except that one is using [fxShow.lt-md]="booleanValue" alongside a gd and the other is using a [fxShow.lt-md]="booleanValue" without a gd.

If you start at gt-sm and resize your window to lt-md the one in the gd will not work as intended and the one not in a gd will work as intended. This is permanently buggy and also persistent in all screen sizes at this point until you refresh.

If you start at lt-md and start with a refreshed browser then everything works as intended and all is well. However once changing to gt-sm, chaos ensues if you try to return to lt-md

The Stack Blitz is broken right now but here is a Stack Blitz with a basic example of this:
StackBlitz

Since the stack blitz is broken you can get the code from there and test it somewhere else, but here is a Pastebin with the code in case you wanted to test it. It's pretty simple so you can copy-paste in into any angular project that uses angular flex layout and it will work:
PasteBin

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

Well, if fxShow and fxHide was intended to work with gd then this is just incorrect behavior.

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

Angular 7 on Chrome is what I was using when I discovered this.

[CaerusKaru]

No, grid directives are not as inter-connected with the rest of the library as the others. This was work that was planned, but postponed. We're working on some re-architecting right now (in the design phase still) that should correct that though. Stay tuned!

[RyanTibbetts-OnScale]

For anyone who comes across this page, I've found a temporary solution that will work for the time being if you need this functionality.

Recently someone brought up an issue regarding SSR, issue #1135. In their issue they discussed the use of [ngStyle] but with responsive tags. I did NOT see anything like this is the in the flex layout documentation, but apparently it works. Using [ngStyle.xs]="{styling objects}" [ngStyle.sm]="{styling objects}" [ngStyle.md]="{styling objects}" etc... works, so even [ngStyle.lg]="{display: 'none'}" will be valid and not be overwritten by grid.

[CaerusKaru]

@RyanTibbetts-OnScale You mean this documentation?