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

[Mufasa]

@CaerusKaru Strike my last line in my previous comments. I had not set my browser window to the correct aspect ratio for mobile.portrait to be fired.

Everything is now working - fxShow/Hide all working as expected.

Many thanks for fixing this.

[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.}