Angular7 - Materiali / CDK-Virtual Scrolling

Questa è una delle nuove funzionalità aggiunte ad Angular 7 chiamata Virtual Scrolling. Questa funzionalità viene aggiunta a CDK (Component Development Kit). Lo scorrimento virtuale mostra all'utente gli elementi dom visibili, mentre l'utente scorre, viene visualizzato l'elenco successivo. Ciò offre un'esperienza più rapida poiché l'elenco completo non viene caricato in una volta e viene caricato solo in base alla visibilità sullo schermo.

Perché abbiamo bisogno del modulo di scorrimento virtuale?

Considera di avere un'interfaccia utente che ha un grande elenco in cui caricare tutti i dati insieme può avere problemi di prestazioni. La nuova funzionalità di Angular 7 Virtual Scrolling si occupa di caricare gli elementi visibili all'utente. Mentre l'utente scorre, viene visualizzato l'elenco successivo di elementi dom visibili all'utente. Ciò offre un'esperienza più veloce e anche lo scorrimento è molto fluido.

Aggiungiamo la dipendenza al nostro progetto -

npm install @angular/cdk –save

Abbiamo finito con l'installazione della dipendenza per il modulo di scorrimento virtuale.

Lavoreremo su un esempio per ottenere una migliore comprensione di come possiamo utilizzare il modulo di scorrimento virtuale nel nostro progetto.

Per prima cosa aggiungeremo il modulo di scorrimento virtuale all'interno app.module.ts come segue -

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 { }

In app.module.ts, abbiamo importato ScrollDispatchModule e lo stesso viene aggiunto all'array delle importazioni come mostrato nel codice sopra.

Il passo successivo è ottenere i dati da visualizzare sullo schermo. Continueremo a utilizzare il servizio che abbiamo creato nell'ultimo capitolo.

Recupereremo i dati dall'URL, https://jsonplaceholder.typicode.com/photosche contiene dati per circa 5000 immagini. Otterremo i dati da esso e li visualizzeremo all'utente utilizzando il modulo di scorrimento virtuale.

I dettagli nell'URL, https://jsonplaceholder.typicode.com/photos sono i seguenti -

Sono dati json che hanno l'URL dell'immagine e l'URL della miniatura. Mostreremo l'URL della miniatura agli utenti.

Di seguito è riportato il servizio che recupererà i dati:

myservice.service.ts

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);
   }
}

Chiameremo il servizio da app.component.ts come segue:

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);
      });
   }
}

Ora la variabile albumdetails ha tutti i dati dall'API e il conteggio totale è 5000.

Ora che abbiamo i dati pronti per essere visualizzati, lavoriamo all'interno di app.component.html per visualizzare i dati.

Dobbiamo aggiungere il tag, <cdk-virtual-scroll-viewport></cdk-virtual-scroll-viewport>per lavorare con il modulo di scorrimento virtuale. Il tag deve essere aggiunto al file .html in cui vogliamo che vengano visualizzati i dati.

Ecco il funzionamento di <cdk-virtual-scroll-viewport> in app.component.html.

<h3>Angular 7 - Virtual Scrolling</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>

Stiamo visualizzando l'ID e l'URL della miniatura all'utente sullo schermo. Finora abbiamo usato principalmente * ngFor, ma all'interno<cdk-virtual-scroll-viewport>, dobbiamo usare * cdkVirtualFor per scorrere i dati.

Stiamo scorrendo attraverso la variabile albumdetails che è popolata all'interno di app.component.html. C'è una dimensione assegnata al tag virtuale [itemSize] = "20" che visualizzerà il numero di elementi in base all'altezza del modulo di scorrimento virtuale.

Il css relativo al modulo di scroll virtuale è il seguente:

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

L'altezza assegnata allo scroll virtuale è di 500px. Le immagini che rientrano in tale altezza verranno visualizzate all'utente. Abbiamo finito con l'aggiunta del codice necessario per visualizzare il nostro modulo di scorrimento virtuale.

L'output di Virtual Scroll Module nel browser è il seguente:

Possiamo vedere le prime 4 immagini che vengono visualizzate all'utente. Abbiamo specificato l'altezza di 500 px. Viene visualizzato uno scorrimento per la tabella, mentre l'utente scorre, le immagini che si adatteranno a quell'altezza verranno visualizzate come mostrato di seguito -

Le immagini richieste vengono caricate mentre l'utente scorre. Questa funzione è molto utile in termini di prestazioni. All'inizio, non carica tutte le 5000 immagini, invece mentre l'utente scorre, gli URL vengono chiamati e visualizzati.