0
votes

I'm learning Angular2 at the moment. In AngularJS i was used to bootstrap with the grid-layout. Now i'm trying to get a fitting layout with flex-layout.

But here starts my problem.

Setup:

I have a collection of 500 Items. I want to display them in tabular form on tablet and desktop devices but in column style on smartphones. For that reason i use the fxLayout="row" and fxLayout.xs="column".

But It seems that the inital loading of the grid takes much longer when the window is sized to mobile display. On bigger screensizes (sm and bigger) it takes just about 2-3 seconds. On the mobile screensizes it takes roughly 7 seconds.

It would be great if someone has some good tips for me how to solve these performance problems.

I created a plunkr where you can see the problem. If the screensize is changed that the divs will be displayed in columns and you change something in the code to force a reload, the page reload will take much longer than on bigger screensizes (where the divs are displayed in rows).

Plunkr

1

1 Answers

0
votes

flex-layout do have performance issues when using it to render large datasets.

You should consider a manual approach for this table/list

Please see this page: https://github.com/angular/flex-layout/wiki/Performance-Considerations