DEV Community

loading...
Cover image for Angular Material Scrolling with multiple columns

Angular Material Scrolling with multiple columns

angeloraso profile image Angelo Raso ・3 min read

Pagination has helped combat performance issues for a long time. However, with the massive use of mobile screens, page up and down has become annoying and impractical.

This article will try to move on from this:

Alt Text

To this:

Alt Text

Github repository

Requirements:

  • Minimal knowledge of angularJs and Angular is expected, including javascript and typescript.

Sponsors:

  • This article has been created thanks to Anura's support.

From pagination to infinite scroll and beyond

  • To avoid showing all existing accounts in the system, we used the ui-bootstrap pagination directive. However, the UX of this view was significantly worse on mobile. For this reason, it was decided to use the Angular Material's CDK and implement a view with infinite scroll.

Alt Text

  • Although the problem had been fixed on mobile phones, too much space was being wasted on the web version. However, implementing a grid was more difficult than expected.

Alt Text

  • After investigating the library, we discovered that Angular Material expects a single column in its virtual scroll. In this way, solving the problem with only CSS was not going to work.

  • Testing various alternatives, the following solution was reached:

    • The set of "N" elements is obtained
    • The set of elements is divided into groups of 4 elements, forming an Nx4 matrix
    • A double "ngFor" is applied: the first to loop through the array, and the second to loop through each group of four elements

Alt Text

  • In this way, it was possible to have a single column with four elements per row, show them as a grid.

  • Although the victory seemed consecrated, problems appeared:

    • Four items per row is a very small number if you have a very large screen
    • Certain screen sizes will fit three items in a row and one below.

Alt Text

  • Therefore, it was necessary to choose a number of elements per row according to the size on the screen, adjusting said quantity in case the screen size changed again.
  • For this, the following architecture was created:
    • A structural directive to get the infinite scroll elements
    • A component to calculate the optimal number of elements per row
    • The corresponding HTML that will contain the cdk-virtual-scroll-viewport"
    • An attribute directive to apply the grid styles
    • A module to declare the created entities

Github repository

Perfect! After several hours, an infinite scroll with multiple columns has been obtained. In your face, Google!

Conclusion:

  • Although creating a virtual scroll with several columns was challenging and fun, it is worth clarifying that if a library has certain limits, as a professional developer you have to ask yourself if the chosen path is really the correct one. On the other hand, there are already created libraries that solve this problem (ngx-virtual-scroller). Thus, reinventing the wheel should be avoided whenever possible.

Discussion (0)

pic
Editor guide