1

I am continuously facing slowness in rendering 600+ rows having 25 columns in angular material table. Its taking approx. 1 minute to render the records. The Large Data Set Observable Passed Down From Parent Component to Material Table Component. There are several filters applied on columns

The data was loading in less than 200ms, but then the page would take, on average, 1 minute to render. I don't want pagination and wanted to show all 600+ records.

I am using Angular Material v13 & flex layout.

I tried every possible solutions as: Angular 6 MatTable Performance in 1000 rows Angular Material Datatable loads slow

Any quick help will be appreciated!!

Ghanshyam Shukla
  • 103
  • 1
  • 12

1 Answers1

0

Angular Flex-layout should not be used with complex UI.

It will re-render every row to add inline styles.

Wiki - Performance Considerations

It has been deprecated since October 2022 for native flexbox or css library.

Farewell, Flex Layout
Modern CSS in Angular: Layouts

There is fork if you need a maintained package: ngx-layout

raphaël Milliés-lacroix
  • 11
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 11 '23 at 00:28