Angular Material In Depth

Author: Your Name

src/app/virtual-scrolling/virtual-scrolling.component.html

@@ -5,8 +5,25 @@
 
     <h3>Virtual Scrolling Demo</h3>
 
-    <mat-list class="scrolling-container mat-elevation-z7">
-      <mat-list-item *ngFor="let item of items"> {{item}} </mat-list-item>
+    <mat-list class="mat-elevation-z7">
+
+        <cdk-virtual-scroll-viewport itemSize="48" class="scrolling-container">
+
+            <mat-list-item *cdkVirtualFor="let item of items; let index = index;
+                    let count = count;
+                    let first = first;
+                    let last = last;
+                    let even = even;
+                    let odd = odd;">
+
+                {{item}}
+
+            </mat-list-item>
+
+
+        </cdk-virtual-scroll-viewport>
+
+
     </mat-list>
 
   </div>

src/app/virtual-scrolling/virtual-scrolling.component.ts

@@ -8,7 +8,7 @@ import {Component, OnInit} from '@angular/core';
 })
 export class VirtualScrollingComponent implements OnInit {
 
-  items = Array.from({length: 20000}).map((value, i) => `Item #${i}`);
+  items = Array.from({length: 100000}).map((value, i) => `Item #${i}`);
 
   ngOnInit() {