Skip to content

Adapting previous CDK Virtual Scrolling project to Nx Monorepo

Notifications You must be signed in to change notification settings

Ban117/virtual-scroll

Repository files navigation

CDK Virtual Scroll

A project I had done that I've now used to learn Nx. Totally overkill for a project of this scale but it was still fun to explore Nx Monorepos.

Running the app and server

  • Run npm run serve then npm start and go to localhost

Project Architecture

Nx

  • Stuck to suggested approach of having smart components inside feature libs, presentational components inside ui libs, data-access contains services

  • Where needed refactored to out /shared directory in libs

  • Although it would probably make more sense to use the new Nx Standalone feature, most larger scale companies are more likely to be using standard Nx Monorepos

SCAM

  • Although standalone components are now out of developer preview with Angular, 15 I still decided to use SCAM. It's similar to standalone components, since Angular 15 is wrapping standalone components in some "behind the scenes" NgModule.

CdkVirtualScrollViewport

  • Since we don't want 1000 of DOM elements rendered, I decided to use the CdkVirtualScrollViewport. The only issue I had is that with the default VirtualScrollStrategy, FixedSizeVirtualScrollStrategy, setting setTotalContentSize gets overridden on scroll (see: https://github.com/angular/components/blob/main/src/cdk/scrolling/fixed-size-virtual-scroll.ts#L117), therefore my list's scrollbar decreases in size as the user scrolls. To fix this, I would have had to implement a custom VirtualScrollStrategy

ngTemplateOutlet

  • Content projection alone wouldn't have been enough to have a generic list component. Using ngTemplateOutlet is much more powerful and it's a great tool for creating more flexible and generic components.

  • ngTemplateContextGuard, a nice trick that's also used internally in Angular's structural directives allows for template type checking of let- variables. It requires passing an input to the ListItemTemplateDirective directive redundantly, but the reward is template typechecking as can seen below Alt text Alt text Alt text

Data

  • Many fields in the countries array are duplicate, this was intentional as this is how the data was originally provided

// todo look into ngStyle and rm ngStyle

About

Adapting previous CDK Virtual Scrolling project to Nx Monorepo

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published