Responsive FxFlex breaks with *ngFor and FxLayoutAlign

[alexcoroza]

Bug Report

I'm having a problem using responsive fxFlex. So I have a <div fxLayout="row wrap"> and inside it is I have a <div *ngFor="let entry of entries" fxFlex="25" fxFlex.xs="50"> but the fxFlex.xs="25" works only on the initial page load and not working if you resize the window or when you landscape/portrait your phone. But when you removed the *ngFor="let entry of entries" and manually put the divs, it worked just fine. Here is a sample code that shows the problem. There are other scenarios where you remove the fxLayoutAlign and retain the *ngFor and will work just fine.

stackblitz sample code

What is the expected behavior?

I expect fxFlex.xs="25" to work(even with *ngFor and fxLayoutAlign) when the screen is xs

What is the current behavior?

fxFlex.xs="25" doesn't work if you resize the window to xs back and forth, it instead shows fxFlex="100" when xs

What are the steps to reproduce?

stackblitz sample code

What is the use-case or motivation for changing an existing behavior?

This is a problem if the customer is using a mobile phone, he can always switch from portrait(xs) to landscape(sm) and vice versa.

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

I don't know but I tried the latest version as of now April 3, 2019. Well it is indicated in package.json in the Stackblitz link I provided

Is there anything else we should know?

[SebastianEShelby]

@alexcoroza

Thanks for bringing this up. Please update your post to include ALL Angular "Structural Directives" since I have the exact same with *NgIf and I'm almost certain this behavior appears for all Structural Directives.

I have come up with a workaround to fix this issue for now:
You need to put your *NgFor condition in a 'ng-container' and wrap your ng-container inside a parent 'div' that includes all your flex API properties. Something like this:

<div fxLayout="row wrap">
   <div  fxFlex="25" fxFlex.xs="50">
      <ng-container *ngFor="let entry of entries">
      </ng-container>
   </div>
</div>

Hopefully this fixes your issue for now. I'm not sure if this behavior is intended by the Flex API or Angular team or if it should be considered a BUG but I'll be subscribing to this for an answer.

[CaerusKaru]

@Alex-Samari I don't think this is as widespread as you're making this out to be.

@alexcoroza The root cause of this is that fxLayoutAlign is nulling out critical CSS that fxFlex is trying to write. This bug was introduced trying to fix this issue: #876 so it's definitely a regression. We'll try to get this patched as soon as we can.

[SebastianEShelby]

@CaerusKaru
I understand. Honestly this could easily be considered a feature rather than a bug depending on how you look at it

[CaerusKaru]

@alexcoroza @Alex-Samari I think this is solved in the latest builds. Can one of you test with the nightly build to verify?

[BryanYin]

@CaerusKaru Just installed nightly build @angular/[email protected], the problem is fixed on my side, also fixed issue in #1205 Thanks!

[CaerusKaru]

Excellent! If this is still an issue for anyone else, we can reopen this later.

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