flex-layout: fxLayoutWrap not working with Angular Universal

@naveedahmed1 The deprecation notice is listed here: https://github.com/angular/flex-layout/blob/cc12733062c363c4121165877227782b7e80570e/src/lib/api/flexbox/layout-wrap.ts#L25-L35

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 That’s the gist of #567, though combining classes is something I hadn’t considered. The solution involves generating one class per element so that we can track the responsive part correctly, I’ll have to think about possibly combining classes for common styles.

@naveedahmed1 It’s definitely a priority, but the higher priority at the moment is getting a full SSR solution ready. The current goal is for the next release, but depending on other factors it may get bumped to the next release.

The current accepted workaround is to downgrade to the nightly build you indicated (or manually add the necessary CSS)

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>

Great, this issue can be closed.

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

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