Responsive API is not working with fxFlexFill

[Mourdraug]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

fxFlexFill.<breakpoint alias> should limit directive to proper width range.

What is the current behavior?

Adding breakpoint alias seems to disable directive.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-flex-layout-seed-h5ajhj?file=app%2Ftest.component.ts

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

Existing behaviour seems to be broken.

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

Every I tested.

Is there anything else we should know?

[ThomasBurleson]

fxFlexFill is currently only a static API; see here.

[CaerusKaru]

@ThomasBurleson Do you want to add a responsive API to this directive? If not, it should be closed since the docs have been updated to include this clarification.

[mackelito]

It would be a great addition.. right now we cant to have fxFlexFill only if fxLayout="column" and not fxLayout.gt-sm="row".. adding responsive features to fxFlexFill would make that super simple :)

[CaerusKaru]

@mackelito This is probably something we could get in after beta.14 is validated, but if you wanted to throw together a PR sooner than that, I'd be happy to review it! 😄

[matthewerwin]

@CaerusKaru this is an interesting issue b/c the library is quite constrained in this area. I was looking at issuing a PR as you solicited in 2018 since it's still not addressed. However, I think it's worth a bit of discussion on approach.

Here is the criteria around this I can see:

• Ability to fill horizontal-only(e.g. fxFillH.gt-lg), vertical-only (e.g. fxFillV.gt-lg), both (current behavior)
• Allow user to specify a % that is used for width, height, max-width, max-height instead of default 100% on all these properties (e.g. fxFill.gt-lg="30%").

Considerations:

• How does this effect rendering if user adds fxFill, fxFillV, fxFillH to the same element to get predictable behavior? Perhaps fxFill checks for fxFillV & fxFillH...if either are active (based on BP)...then utilize those in fxFill...and in fxFillV, or fxFillH...if fxFill is present and active (based on BP) -- then do nothing since that will reference the %/px values if any in fxFillV, fxFillH
• Add support to new layout system RFC.

This would be very powerful in allowing very responsive handling of fill such as with SVG's. Let me know your thoughts.

[CaerusKaru]

My preference for this would be to have it managed as an input. E.g. <h w> in percents. This would allow us to keep using one directive and maintain backwards-compatibility for current fxFill users.

On a side note, please ping me on my personal email: (my GitHub alias separated by . at gmail dot com). We can discuss this as well as your cascading router PR on angular/angular.