Flex-layout: fxHide.lt-md (and others) is broken in 7.0.0-beta.20

[cfeltz34]

Bug Report

What is the expected behavior?

When I use "fxHide.lt-md" attribute in a Angular project 7.x the component need to be hidden

What is the current behavior?

"fxHide" attribute hide the component
"fxHide.lt-md" attribute not hide the component with Angular 7.x
"fxHide.lt-md" attribute hide the component with Angular 5.4

What are the steps to reproduce?

https://stackblitz.com/edit/angular-piagbq?file=src%2Fapp%2Fapp.component.html

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

Angular 7.0.1 on Windows + Chrome (Version 70.0.3538.110 (Build officiel))

[CaerusKaru]

@cfeltz34 I'm working on this right now and we'll get a patch release out by EOD. This is just for fxHide/fxShow, correct?

[pscanlon1]

Yes.

Also would like to point out that I'm not crazy! :)

[jefbarn]

Also seeing this with "fxLayoutGap.gt-sm"

[CaerusKaru]

@jefbarn Yeah that tracks. I'm hunting down the fix now.

[CaerusKaru]

Here's the fix: https://github.com/angular/flex-layout/pull/916

[CaerusKaru]

If anyone could test that it works using the nightly builds (npm i angular/flex-layout), that would be really helpful.

[CaerusKaru]

7.0.0-beta.21 has been released to address this issue

[cfeltz34]

Hi,
I have updated my projet with 7.0.0-beta.21 but... same problem :-(
-->
https://stackblitz.com/edit/angular-piagbq?file=src%2Fapp%2Fapp.component.html
[image: image.png]

Le sam. 15 déc. 2018 à 01:48, CaerusKaru [e-mail] a
écrit :7.0.0-beta.21 has been released to address this issue

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/flex-layout/issues/915#issuecomment-447520589,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ArwpjjNZRugVD627jRVjk4qZtT4GzDb-ks5u5Eb1gaJpZM4ZUUKs
.

[paulstelzer]

Can confirm that beta.21 is not working. For example this:

<div class="app-info-box" fxFlex="50" fxFlex.gt-sm="25">
...
</div>

fxFlex.gt-sm has no function:

Stackblitz: https://stackblitz.com/edit/angular-3fnkgk

[CaerusKaru]

I know this is an incredibly urgent issue, but at the moment I'm at a loss. The patch in 7.0.0-beta.21 added a test for this case _explicitly_, which is passing.

I'm still actively working on this, and we'll try to get a patch by next week.

[CaerusKaru]

The plot thickens as this exact template on our demo-app (which is built and compiled with the Angular CLI) works as expected. Now the question is why doesn't this work on StackBlitz? (or other apps if this isn't working for people using the CLI)

[cfeltz34]

It is not only on StackBlitz.
I have exactly the same issues in my computer (New project created with the
CLI)

Le sam. 15 déc. 2018 22:24, CaerusKaru [e-mail] a écrit :

The plot thickens as this exact template on our demo-app (which is built
and compiled with the Angular CLI) works as expected. Now the question is
why doesn't this work on StackBlitz? (or other apps if this isn't working
for people using the CLI)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/flex-layout/issues/915#issuecomment-447598816,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Arwpjn0Isoc2tTQpOi6h4EfNyFaUVGFMks5u5Wh8gaJpZM4ZUUKs
.

[CaerusKaru]

@cfeltz34 I believe you! It's just so bizarre that our demo app works flawlessly with the same build artifacts.

[cfeltz34]

I'm newbie on Angular, but I have some experience on javascript and object
programming.
It's late here, in France, but I will try to have a look tomorrow to give
you more informations

Le sam. 15 déc. 2018 22:34, CaerusKaru [e-mail] a écrit :

@cfeltz34 https://github.com/cfeltz34 I believe you! It's just so
bizarre that our demo app works flawlessly with the same build artifacts.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/flex-layout/issues/915#issuecomment-447599416,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ArwpjreSaInOP7-oH7u1NEZ_AKNhf_84ks5u5Wr8gaJpZM4ZUUKs
.

[CaerusKaru]

I tracked it down! And just when I thought I was losing the last remnants of my sanity. The issue with our demo app is that we have an ObservableMedia instance running that is doing something to properly register the overlapping breakpoints. Now we just have to make sure the MediaMarshaller is doing it too and it should solve the problem :tada:

[CaerusKaru]

This was an unbelievable PITA, but turned out to be super simple. There was a race condition in the new MediaMarshaller between registration of breakpoints and the activation for the observable. Essentially, the registration would fire off events, but the marshaller would not yet be listening. PR #921 fixes this and should be merged shortly. After that, we'll cut a new release, probably on Monday or Tuesday.

If it's urgent, you can use the nightly builds once it's been merged.

[CaerusKaru]

@cfeltz34 Can you test this in your app? Please install the new version with npm i angular/flex-layout (note lack of @)

[CaerusKaru]

Anecdotally with the StackBlitz provided, installing the latest nightly (enter https://github.com/angular/flex-layout-builds#master-232fc6e as the dependency) fixes this issue, so I'm going to unpin this and mark as resolved.

[paulstelzer]

@CaerusKaru Can confirm, it's working in my stackblitz, too :)

[cfeltz34]

Great's!
It's work on Stackblitz :-)

But I have some difficulties to test in my platform.
I jave uninstalled "npm uninstall @angular/flex-layout" and installed your
branch "npm i angular/flex-layout" but my project can't find the module.
I have tested with :

• [ts] Cannot find module 'angular/flex-layout'. [2307]
• [ts] Cannot find module '@angular/flex-layout'. [2307]

I can wait the next version, it's not problem for me. But I sorry if I can
test your fix.

Thank !

Christophe Feltz
Ingénieur en développement Informatique
Responsable bénévole des projets :

• la carte des dons : https://www.lacartedesdons.fr
• PermaGuildes : https://www.permaguildes.fr/
• Comment sortir, la carte des randonneurs : https://map.commentsortir.fr/
• Infor'ma Planète (http://www.informaplanete.org)

Blog of my travels : http://cfeltz.blogspot.com

Tél : [phone]
105 avenue de la Méditerranée
34 970 Lattes (France)

Le dim. 16 déc. 2018 à 09:17, Paul Stelzer [e-mail] a
écrit :

@CaerusKaru https://github.com/CaerusKaru Can confirm, it's workin in
my stackblitz, too :)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/flex-layout/issues/915#issuecomment-447625218,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Arwpjnck2be_2e5rEvxIt2qm4FgH0BX3ks5u5gGcgaJpZM4ZUUKs
.

[xmlking]

Combine Uses of fxShow + fxHide not working for me as stated here

https://github.com/angular/flex-layout/blob/master/docs/documentation/fxShow-API.md

Env: @angular/core : 7.1.3 , angular/flex-layout: ^7.0.0-beta.21

    <div fxHide fxShow.gt-sm>test</div>

[paulstelzer]

Should fixed with beta.22 - or revert back to beta.19 if you cannot wait until the new beta release

[Trojaner]

I had the same issue, I can confirm that this issue is fixed with beta.22.

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