Angular Material In Depth

Author: jhades

src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ import {CourseResolver} from "./services/course.resolver";
 import {CreateCourseComponent} from './create-course/create-course.component';
 import {DragDropComponent} from './drag-drop/drag-drop.component';
 import {TreeDemoComponent} from './tree-demo/tree-demo.component';
+import {VirtualScrollingComponent} from './virtual-scrolling/virtual-scrolling.component';
 
 const routes: Routes = [
     {
@@ -36,6 +37,10 @@ const routes: Routes = [
   {
     path: "tree-demo",
     component: TreeDemoComponent
+  },
+  {
+    path: 'virtual-scrolling',
+    component: VirtualScrollingComponent
   },
     {
         path: "**",

src/app/app.module.ts

@@ -45,6 +45,7 @@ import {DragDropComponent} from './drag-drop/drag-drop.component';
 import {MatGridListModule} from '@angular/material/grid-list';
 import {TreeDemoComponent} from './tree-demo/tree-demo.component';
 import {MatTreeModule} from '@angular/material/tree';
+import {VirtualScrollingComponent} from './virtual-scrolling/virtual-scrolling.component';
 
 @NgModule({
     declarations: [
@@ -58,7 +59,8 @@ import {MatTreeModule} from '@angular/material/tree';
         CreateCourseStep1Component,
         CreateCourseStep2Component,
         DragDropComponent,
-        TreeDemoComponent
+        TreeDemoComponent,
+        VirtualScrollingComponent
     ],
     imports: [
         BrowserModule,

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

@@ -0,0 +1,15 @@
+
+<div class="container">
+
+  <div class="virtual-scrolling">
+
+    <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>
+
+  </div>
+
+</div>
+

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

@@ -0,0 +1,15 @@
+
+.container {
+  font-family: "Roboto";
+  display: flex;
+  justify-content: center;
+  padding: 30px;
+}
+
+
+.scrolling-container {
+  display: block;
+  width: 200px;
+  max-height: 200px;
+  overflow-y: scroll;
+}

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

@@ -0,0 +1,18 @@
+import {Component, OnInit} from '@angular/core';
+
+
+@Component({
+  selector: "virtual-scrolling",
+  templateUrl: 'virtual-scrolling.component.html',
+  styleUrls: ["virtual-scrolling.component.scss"]
+})
+export class VirtualScrollingComponent implements OnInit {
+
+  items = Array.from({length: 100}).map((value, i) => `Item #${i}`);
+
+  ngOnInit() {
+
+  }
+
+
+}