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

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]

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.

[angular-automatic-lock-bot[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.}