Angular7 Materials/CDK-Virtual Scrolling

Angular7 Materials/CDK-Virtual Scrolling

Virtual Scrolling is one of the new features added to Angular 7. CDK (Component Development Kit) adds this feature. Virtual scrolling shows the user the visible dom elements, as the user scrolls, the next list appears. This gives faster experience as the full list is not loaded at one go and only loaded on the screen according to the visibility.

Why do we need Virtual Scrolling Module?

Imagine you have a UI that has a wide list where you may have performance problems loading all the data together. Angular 7 Virtual Scrolling 's latest function is responsible for loading the elements which are available to the user. The next list of browser-visible dom-elements is displayed as the user scrolls. This gives quicker experience and also very smooth scrolling

Let us add the dependency to our project −

npm install @angular/cdk –save

We 're finished with installing virtual scrolling module dependency.

We'll be working on an example to get a better understanding of how we can use our project's virtual scrolling module.

First we'll add the virtual scrolling module within app.module.ts as follows −

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

We have imported the ScrollDispatchModule into app.module.ts and the same is added to the import array as shown in the above code.

The next step is to get the data to show up on the screen. We are going to continue using the service that we created in the last chapter.

We 're going to get data from the url, https:/jsonplaceholder.typicode.com/photos with data for about 5000 images. We will get the data from it and use the virtual scrolling module to display it to the user.

Following is the service which will fetch data −

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   private finaldata = [];
   private apiurl = "https://jsonplaceholder.typicode.com/photos";
   constructor(private http: HttpClient) { }
   getData() {
      return this.http.get(this.apiurl);
   }
}

We will call the service from app.component.ts as follows −

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   public albumdetails = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.albumdetails = Array.from(Object.keys(data), k=>data[k]);
         console.log(this.albumdetails);
      });
   }
}

Now the album details variable has all the api data, and the total count is 5000.

Now that we have the data ready for display, let us work on displaying the data inside app.component.html.

We need to add the tag, to work with virtual module scrolling. The tag must be added to the.html file where we want to display the data.

This is how app.component.html works.

<h3>Angular 7 - Virtual Scrolling Example 1</h3>
<cdk-virtual-scroll-viewport [itemSize] = "20">
   <table>
      <thead>
         <tr>
            <td>ID</td>
            <td>ThumbNail</td>
         </tr>
      </thead>
      <tbody>
         <tr *cdkVirtualFor = "let album of albumdetails">
            <td>{{album.id}}</td>
            <td>
               <img src = "{{album.thumbnailUrl}}" width = "100" height = "100"/>
            </td>
         </tr>
      </tbody>
   </table>
</cdk-virtual-scroll-viewport>

On the screen we display the I d and thumbnail url to the user. We used * ngFor the most part, but inside, we have to use * cdkVirtualFor the data to loop.

We loop through variable albumdetails which is populated within app.component.html. The virtual tag [itemSize]="20 "is assigned a size that will display the number of items based on the height of the virtual scroll module.

The css concerning the virtual scroll module are as follows –

table {
   width: 100%;
}
cdk-virtual-scroll-viewport {
   height: 500px;
}

The Virtual scroll height is 500px. The images which fit within that height are shown to the user. We 're done adding the code needed to make our virtual scroll module viewable.