Flex-layout: Need programmatic notifications of breakpoints changes

[amcdnl]

Requirement

In a situation where there is multiple layouts based on screen breakpoints and the contents include components that use dynamic sizing (with boundings to window resize events) do not allow the layout to be re-calculated. Example:

Desktop

Mobile

Use Case

In ngx-charts, we have the option to dynamically size the chart based on the container code reference. We also listen for window resize events to recalculate the dimensions of the chart code reference. However, when a user resizes the screen to switch layout alogs say from row to column it doesn't resize properly. This is not an issue with a pure css grid system since the css calculations are not fixed widths and pre-calculated before JavaScript is ran.

Proposal

I'm not sure there is a great way to accomplish this, best I can think of is a custom (resize) event on a fxFlex directive.

[coryrylan]

I think the custom event to listen to is the best option. With that you can manually re-trigger the resize of the chart. I would think its the only way to guarantee that the resize event of the chart occurs after the layout lib has done it's calculations.

[ThomasBurleson]

@amcdnl - We have a great solution for this. Inject the * MatchMediaObservable* into your component and subscribe to mediaQuery change activity and then call bindWindowResizeEvent() to programmatically recalculate the dimensions.

See Using MatchMediaObservable

NOTE: You may need to delay a tick for the style changes to reflow... before your recalculate the dimensions.

I you provide a Plunkr Demo for your issues, I will add a fix AND add it to our online Demo Samples.

[d3viant0ne]

I'd personally love to see this in the demo samples. Responsive data visualization ftw :)

[amcdnl]

That's really clever!

Thanks, I wanted to throw out the question as an hypothetical and if it was really an issue then build the case out.

[d3viant0ne]

@amcdnl And now you know why I like this project :) Responsive layout as a stream opens up all kinds of cool possibilities in the realm of user experience.

[ThomasBurleson]

@amcdnl - can you provide an Angular Plunkr with an easy D3 pie chart; a demo that listens to window resize events and triggers the Chart to redraw? Thx.

[amcdnl]

Is MatchMediaObservable version published on npm? When it injects I get a empty object...

I'll make a demo of the bug and the charts for your demo page ;)

[ThomasBurleson]

For now, either use master or wait for the beta.2 coming on Monday.

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