flex-layout: fxShow does not seem to work with custom breakpoints

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