Flex-layout: Changes not applied on window resize

[willyboy]

Bug Report

What is the expected behavior?

When I resize the window, I expect that the fxLayout.lt-md, ngStyle.gt-xs, fxFlexOrder, etc directives are applied.

What is the current behavior?

Page resize does not trigger changes in layout based on using the responsive directives.

Everything was working in beta 19, responsive layouts broken by 20, and as of 22, the layout works on page load but when resizing the page, the directives aren't applied.

What are the steps to reproduce?

In this stackblitz: https://stackblitz.com/edit/angular-flex-layout-seed-xoetvd?file=app/test.component.ts try resizing the window. The initial resize works but if you shrink it back, the style doesn't return to how it started out.

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

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

Is there anything else we should know?

[CaerusKaru]

At first glance I have no idea what's going on. I'll have to investigate later in the day. Can confirm it's definitely an issue though, but not sure the size and scope yet.

[willyboy]

I did just notice that there's a console error associated with it that I didn't notice before:

TypeError: Cannot read property 'split' of undefined
    at LayoutAlignStyleBuilder.buildStyles (angular-flex-layout-seed-xoetvd.stackblitz.io/turbo_modules/@angular/[email protected]/bundles/flex-layout-flex.umd.js:1426)

[willyboy]

And a bit more info:
The first section has fxLayoutAlign.lt-md="center center" but no fxLayoutAlign property because it should just use default for gt-sm. That seems to trigger the error. If I add an fxLayoutAlign property, the error seems to go away.

[CaerusKaru]

The plot thickens, because this issue _only_ arises when there's also a fxLayout present on the element. Likely a bad interaction between the two (fxLayoutAlign has a soft dependency on fxLayout)

[willyboy]

That gives some insight into a workaround if it's not an easy fix

[CaerusKaru]

This became a larger issue, so I decided to patch the whole thing instead of using a workaround. The PR is here: #949 in case you're curious, and we'll get it in for the next release. Apologies again in the meantime.

[willyboy]

@CaerusKaru Thanks! Don't apologize, this library helps us a ton. :)

[Fellach]

Hi @CaerusKaru

I'm not sure your fix covers the scenario below so I put it just in case

<header fxLayout="row" [fxHide]="myVar" [fxHide.xs]="true">

Also here the directives stop working and an element is still visible after resizing.

Thanks!

[CaerusKaru]

@Fellach the issue you’re looking for is #945

[ArchanaVijayaragavan]

Hi @CaerusKaru ,

As per the changelog of the "@angular/flex-layout": "7.0.0-beta.23", could see the above mentioned #947 got fixed.

But post installing this latest version as well, the issue still persist. Request your help.

Thanks.

[naveedahmed1]

Any update on this? I am receiving below error with beta 7.0.0-beta.23

ERROR TypeError: this._delegate.setNgClass is not a function
    at NgClass.set [as ngClass] (common.js:3241)
    at DefaultClassDirective.push../node_modules/@angular/flex-layout/esm5/extended.es5.js.ClassDirective.updateWithValue (extended.es5.js:207)
    at MediaMarshaller.push../node_modules/@angular/flex-layout/esm5/core.es5.js.MediaMarshaller.updateElement (core.es5.js:3309)
    at MediaMarshaller.push../node_modules/@angular/flex-layout/esm5/core.es5.js.MediaMarshaller.setValue (core.es5.js:3197)
    at DefaultClassDirective.push../node_modules/@angular/flex-layout/esm5/core.es5.js.BaseDirective2.setValue (core.es5.js:605)
    at core.es5.js:443
    at Array.forEach (<anonymous>)
    at DefaultClassDirective.push../node_modules/@angular/flex-layout/esm5/core.es5.js.BaseDirective2.ngOnChanges (core.es5.js:437)
    at checkAndUpdateDirectiveInline (core.js:17257)
    at checkAndUpdateNodeInline (core.js:25086)

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