fxLayoutWrap not working with Angular Universal

[naveedahmed1]

When using fxLayoutWrap with Server Side Rendering, all elements are always shown in one row. With 2.0.0-beta.9 it was working perfectly but its broken in latest nightly update.

[mackelito]

Could you paste your code as well?

[naveedahmed1]

Please test the below code with Server Side Rendering and observe the initial load, before preboots sync the changes.
It will show all items in one row, and when preboots syncs the changes, its properly formatted. It was working perfectly with last beta.

<div fxLayout fxLayoutWrap class="table-grid touched">
    <div fxFlex.xs="50%" fxFlex="20%">  Item 1          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 1 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 2          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 2 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 3          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 3 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 4          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 4 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 5          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 5 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 6          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 6 Value    </div>
</div>

[CaerusKaru]

Might be fixed by #466. The latest beta of angular/flex-layout blocked certain methods from being used with Universal, and that PR reverses that change. If/when that PR gets merged, pull the latest nightly build and see if that fixes it.

[CaerusKaru]

As a side note, the fxLayoutWrap API has been marked as deprecated, so you may want to explore other formatting options for future use.

[naveedahmed1]

Can you please also share, what are the alternatives to fxLayoutWrap?

[CaerusKaru]

@naveedahmed1 The deprecation notice is listed here:

flex-layout/src/lib/api/flexbox/layout-wrap.ts

Lines 25 to 35 in cc12733

	/**
	* @deprecated
	* This functionality is now part of the `fxLayout` API
	*
	* 'layout-wrap' flexbox styling directive
	* Defines wrapping of child elements in layout container
	* Optional values: reverse, wrap-reverse, none, nowrap, wrap (default)]
	*
	*
	* @see https://css-tricks.com/almanac/properties/f/flex-wrap/
	*/

As shown on the fxLayout section of the Wiki page, you can add a second argument to fxLayout to add a wrap (not adding this argument defaults to no wrap).

So, in your case, you would change fxLayout fxLayoutWrap to fxLayout="row wrap". The documentation is lacking on wrap options, but they are alpha-equivalent to those for flex-wrap CSS:
reverse | wrap-reverse | reverse-wrap | no | none | nowrap | wrap

[naveedahmed1]

Thank you so much @CaerusKaru , its awesome :)

[CaerusKaru]

@naveedahmed1 The fixes from #466 have been merged into the latest nightly build. Does that fix your problem?

[naveedahmed1]

Yes, its fixed now. Thank you!

[CaerusKaru]

Great, this issue can be closed.

[naveedahmed1]

@CaerusKaru I think the latest nightly build has introduced this issue again. Can you please check?

Please also confirm if support for fxLayoutWrap has been removed? I had to update
fxLayout fxLayoutWrap with fxLayout="row wrap".

[CaerusKaru]

Please provide a minimal reproduction repo that I can confirm. fxLayoutWrap has been removed in the latest nightly build.

[naveedahmed1]

Can you please try below with SSR enabled and observe the behavior. Before the client side code takes control all blocks are shown in one row when client side code is activated it is displayed correctly.

<div fxLayout="row wrap">
    <div fxFlex.xs="50%" fxFlex="20%">  Item 1          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 1 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 2          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 2 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 3          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 3 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 4          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 4 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 5          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 5 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 6          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 6 Value    </div>
</div>