Angular Material In Depth

Author: Your Name

src/app/app.component.html

@@ -25,6 +25,11 @@
                 <span>Tree Demo</span>
             </a>
 
+            <a mat-list-item routerLink="virtual-scrolling">
+                <mat-icon>import_export</mat-icon>
+                <span>Virtual Scrolling</span>
+            </a>
+
             <a mat-list-item>
                 <mat-icon>person_add</mat-icon>
                 <span>Register</span>

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

@@ -10,6 +10,6 @@
 .scrolling-container {
   display: block;
   width: 200px;
-  max-height: 200px;
+  height: 200px;
   overflow-y: scroll;
 }

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: 100}).map((value, i) => `Item #${i}`);
+  items = Array.from({length: 20000}).map((value, i) => `Item #${i}`);
 
   ngOnInit() {