Repo Demo
HTML
TS
CSS
📜 Signal Example 14: Product List with Virtual Scrolling
âš¡ Explore how Angular Signals and CDK Virtual Scrolling can render massive lists with blazing performance! This example shows a 1,000-product list that scrolls smoothly and updates reactively.
Product 1$95
Product 2$2
Product 3$2
Product 4$55
Product 5$40
Product 6$3
Product 7$60
Product 8$30
Product 9$41
Product 10$72
Product 11$92
Product 12$59
âš¡ Deep Dive: Virtual Scrolling with Angular Signals
Large lists can slow down your app if you render every item at once. Virtual scrolling solves this by only rendering what’s visible, while signals keep your data reactive and up to date.
Combine signals with virtual scrolling to build fast, scalable UIs that handle thousands of items with ease.
How This Example Works
- Signal Declaration: The product list is a signal:
products = signal([...])with 1,000 items. - Virtual Scrolling:
<cdk-virtual-scroll-viewport>only renders items in view, making scrolling smooth and memory-efficient. - Reactive UI: Any update to the
productssignal instantly updates the visible list. - Performance: Even with thousands of items, the UI stays fast and responsive.
- No Subscriptions Needed: Signals handle all reactivity for you. The UI and state stay in sync in real time.
Why Use Signals with Virtual Scrolling?
- Scalability: Easily handle huge lists without performance drops.
- Instant Feedback: Users see updates as they scroll, with no lag or flicker.
- Readability: The code is simple and declarative, even for complex UIs.
- Real-World Use: Perfect for product catalogs, logs, dashboards, or any large dataset.
★With signals and virtual scrolling, your Angular apps can handle big data with style and speed!