Virtual
Scrolling has been added to CDK, loading and unloading elements from the DOM based on the visible parts of a list, and making it possible to
build very fast experiences for users with very large scrollable lists.
Install the module using NPM - npm install @angular/[email protected]
The <cdk-virtual-scroll-viewport>
displays large lists of elements performance by only rendering the items that
fit on-screen.
Virtual
scrolling is different from strategies like infinite
scroll where it renders a set amount of elements and then when you hit the end
renders the rest.
Firstly, we need to install the Angular CDK package to import the ScrollingModule
module.
Install the module using NPM - npm install @angular/[email protected]
Table
of Contents -
1.
To Install the angular CDK package
2.
To Import the ScrollingModule module
3.
Example
4.
Result
Example
- Open the terminal window and execute the above command
-
Import
the ScrollingModule module -
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { DataTablesModule } from 'angular-datatables';
//Scrolling Module
import { ScrollingModule } from '@angular/cdk/scrolling';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
DataTablesModule,
ScrollingModule //Scrolling Module
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Added
the Scroll Items for scrolling your Items - app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7 New Features –
Virtual Scrolling and Drag and Drop Example';
scrollItems: number[] = [];
constructor() {
for (let index = 1; index < 99000; index++) {
this.scrollItems.push(index);
}
}
}
The
code for HTML DOM - app.component.html
<h2> {{title}}</h2>
<h4>Virtual Scrolling Example -</h4>
<cdk-virtual-scroll-viewport class="viewport-section" itemSize="100">
<div class="item-section" *cdkVirtualFor="let item of scrollItems">Your Item Row{{item}}</div>
</cdk-virtual-scroll-viewport>
And
CSS - app.component.css
.viewport-section {
height: 200px;
width: 90%;
border: 1px solid rgb(169,169,169)
}
.item-section {
padding: 15px;
background: rgb(192,192,192);
margin-bottom: 1px;
text-align: center;
font-size: 15px;
}
Result
go to link - https://www.useloom.com/share/4fa3625b39d040308ae31d1a2bb9065b
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
