FxLayout element with fxHide.xs doesn't hide on media changes

[mtraynham]

Bug Report

What is the expected behavior?

<div fxLayout fxHide.xs></div> respects media changes and hides the element at extra-small screen sizes.

<div fxLayout [fxHide.xs]="booleanVariable"></div> respects media changes and hides the element at extra-small screen sizes if the booleanVariable is true. This case is specific to my own code, and I want to make sure it works.

What is the current behavior?

<div fxLayout [fxHide.xs]="booleanVariable"></div>

• On initial load at extra-small screen sizes hides the element
• On resize to a larger size, displays the element
• On resize back to extra-small, does not hide the element.

Note: When the element doesn't have fxLayout (e.g. <div [fxHide.xs]="booleanVariable"></div>), it works properly.

What are the steps to reproduce?

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

https://stackblitz.com/edit/angular-flex-layout-seed-k1oskk?file=app%2Ftest.component.ts

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

It's broken.

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

Angular 7.1.4
Material 7.2.0
TypeScript 3.1.6

Is there anything else we should know?

[CaerusKaru]

While I can plainly confirm that this is an issue, I'm having a hell of a time confirming it using our internal test suite. This may take some time to track down using other methods. The workaround for now is to use ngStyle to set display: none (since there is a workaround, this is a P1, and we won't be cutting an emergency release).

[mtraynham]

So in the bound boolean variable case, is that something like [ngStyle.xs]="{'display': booleanVariable ? 'none' : 'flex'}"?

I guess I could also try [ngClass.xs]="{hidden: booleanVariable}"

[CaerusKaru]

Yeah, that's the general idea. The root cause analysis on this is that there's a race condition between fxHide and fxLayout. fxHide sets display: none, and then fxLayout overrides it. The only reason it's set ok at startup is because fxHide waits until AfterContentInit before it fires.

We'll have a patch for this, but it won't be published until the next release (although it will be available in the nightly builds).

[DeadmanM]

Same issue here, even when I replace fxHide directives with ngStyle.xs="display: 'none'".

[CaerusKaru]

The issue is a conflict with fxLayout, so that's the one that needs to be parsed out. You can keep fxHide, but replace fxLayout with style="display: flex; flex-direction: row. The direction part won't be affected by fxHide, so if you need to make it responsive, you can use ngStyle for that, e.g. ngStyle="{'flex-direction': 'row'}" ngStyle.xs="{'flex-direction': 'column'}".

Alternatively you can put these in classes and use responsive ngClass.

I've patched this in #948, so it'll definitely be fixed in the next release, and I apologize for the confusion in the meantime.