fxLayoutGap not working with fxLayout fxFlexOrder

[parindholakia]

Bug:

fxLayoutGap does not work when fxFlexOrder is given with responsive breakpoints.Initially it is rendered properly. But when the screen is resized,fxLayoutGap does not work.

What is the expected behavior?

fxLayoutGap should work when screen is resized.

What are the steps to reproduce?

stackblitz

1. Initial Page rendered.

2. After page resize
   

3. normal mode after resizing.

[CaerusKaru]

Related to #606, I have some fixes in mind that we'll try to get in by beta.16

[m-henderson]

@CaerusKaru do you need help with this issue? if so, could you give me a starting point?

[CaerusKaru]

@m-henderson If you want to pitch in, that'd be great! The starting point most likely involves adding a MutationObserver in the LayoutGapDirective that watches all immediate children for changes, particularly relating to ordering (essentially re-running the initialization logic).

[CaerusKaru]

Let's revisit this once #900 lands. @parindholakia would you be willing to test it out on the new version?

[CaerusKaru]

This is half-working after 7.0.0-beta.21. The gap now works after resizes, but only in row mode, not column mode. And now there's a new bug with fxFlexOrder, where it doesn't disengage afterwards (which is an easy fix).

[CaerusKaru]

Encapsulated the fxFlexOrder responsive issues here: #918. Will start working on a fix, followed by the layout-gap issues. The root cause has been tracked and will be pushed shortly.

[CaerusKaru]

And here's the tracking PR for the layout-gap issues: #919. The root cause has been tracked and will be pushed shortly.

[CaerusKaru]

I've tested the StackBlitz against the latest nightly build, and confirmed that this issue is fixed. To see for yourself, update all deps to latest, and then install https://github.com/angular/flex-layout-builds#master-d322ea7.

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