Angular7 - Materiales / CDK-Desplazamiento virtual

Esta es una de las nuevas características agregadas a Angular 7 llamada Virtual Scrolling. Esta función se agrega a CDK (Kit de desarrollo de componentes). El desplazamiento virtual muestra los elementos dom visibles al usuario, a medida que el usuario se desplaza, se muestra la siguiente lista. Esto brinda una experiencia más rápida, ya que la lista completa no se carga de una vez y solo se carga según la visibilidad en la pantalla.

¿Por qué necesitamos el módulo de desplazamiento virtual?

Considere que tiene una interfaz de usuario que tiene una gran lista en la que cargar todos los datos juntos puede tener problemas de rendimiento. La nueva función de Angular 7 Virtual Scrolling se encarga de cargar los elementos que son visibles para el usuario. A medida que el usuario se desplaza, se muestra la siguiente lista de elementos dom visibles para el usuario. Esto proporciona una experiencia más rápida y el desplazamiento también es muy suave.

Agreguemos la dependencia a nuestro proyecto -

npm install @angular/cdk –save

Hemos terminado con la instalación de la dependencia para el módulo de desplazamiento virtual.

Trabajaremos en un ejemplo para comprender mejor cómo podemos usar el módulo de desplazamiento virtual en nuestro proyecto.

Primero agregaremos el módulo de desplazamiento virtual dentro app.module.ts como sigue -

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

En app.module.ts, hemos importado el ScrollDispatchModule y lo mismo se agrega a la matriz de importaciones como se muestra en el código anterior.

El siguiente paso es hacer que los datos se muestren en la pantalla. Continuaremos usando el servicio que creamos en el último capítulo.

Obtendremos datos de la URL, https://jsonplaceholder.typicode.com/photosque tiene datos para alrededor de 5000 imágenes. Obtendremos los datos de él y los mostraremos al usuario mediante el módulo de desplazamiento virtual.

Los detalles en la URL, https://jsonplaceholder.typicode.com/photos son los siguientes:

Son datos json que tienen URL de imagen y URL de miniatura. Mostraremos la URL en miniatura a los usuarios.

A continuación se muestra el servicio que obtendrá datos:

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

Llamaremos al servicio desde app.component.ts de la siguiente manera:

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

Ahora la variable albumdetails tiene todos los datos de la API y el recuento total es 5000.

Ahora que tenemos los datos listos para mostrarse, trabajemos dentro de app.component.html para mostrar los datos.

Necesitamos agregar la etiqueta, <cdk-virtual-scroll-viewport></cdk-virtual-scroll-viewport>para trabajar con el módulo de desplazamiento virtual. La etiqueta debe agregarse al archivo .html donde queremos que se muestren los datos.

Aquí está el funcionamiento de <cdk-virtual-scroll-viewport> en 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>

Estamos mostrando la identificación y la URL en miniatura al usuario en la pantalla. Hemos utilizado principalmente * ngFor hasta ahora, pero dentro<cdk-virtual-scroll-viewport>, tenemos que usar * cdkVirtualFor para recorrer los datos.

Estamos recorriendo la variable albumdetails que se completa dentro de app.component.html. Hay un tamaño asignado a la etiqueta virtual [itemSize] = "20" que mostrará el número de elementos según la altura del módulo de desplazamiento virtual.

El CSS relacionado con el módulo de desplazamiento virtual es el siguiente:

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

La altura dada al pergamino virtual es 500px. Las imágenes que quepan dentro de esa altura se mostrarán al usuario. Terminamos de agregar el código necesario para que nuestro módulo de desplazamiento virtual sea visto.

La salida del módulo de desplazamiento virtual en el navegador es la siguiente:

Podemos ver que las primeras 4 imágenes se muestran al usuario. Hemos especificado la altura de 500px. Se muestra un desplazamiento para la tabla, a medida que el usuario se desplaza, las imágenes que encajarán en esa altura se mostrarán como se muestra a continuación:

Las imágenes requeridas se cargan a medida que el usuario se desplaza. Esta característica es muy útil en términos de rendimiento. Al principio, no carga todas las 5000 imágenes, en cambio, a medida que el usuario se desplaza, se llaman y se muestran las URL.

↰ Previous page Next page ↱