fxShow does not seem to work with custom breakpoints #758
Description
Bug, feature request, or proposal:
Bug
What is the expected behavior?
Custom breakpoints should respect fxShow and fxHide
What is the current behavior?
Only fxHide works
What are the steps to reproduce?
https://stackblitz.com/edit/flexlayout-h9m1hc
The behaviour can be observed by changing the width of the rendered page. As you reduce the width the header at the top will change to MobilePortrait. At this point I expect this section of my HTML (within app.component.html) to be displayed:
<section
fxHide
fxShow.mobile.portrait="true">
fxShow.mobile.portrait
</section>
However, all my sections which hide their content by default and only show when the specific media query matches do not seem to be working.
The opposite seems to work - i.e all sections that are shown by default but only hidden when the specific media query matches work as expected.
What is the use-case or motivation for changing an existing behavior?
I want to be able to use my custom breakpoint directives for both showing and hiding certain elements on the page.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 6.0.3
Material 6.2.0
macOS High Sierra v10.13.4
Chrome Version 66.0.3359.181 (Official Build) (64-bit)
Is there anything else we should know?
I don't think so