Angular7 - Materiais / CDK-Rolagem Virtual

Este é um dos novos recursos adicionados ao Angular 7, chamado de Rolagem Virtual. Este recurso é adicionado ao CDK (Component Development Kit). A rolagem virtual mostra os elementos dom visíveis para o usuário, conforme o usuário rola, a próxima lista é exibida. Isso proporciona uma experiência mais rápida, pois a lista completa não é carregada de uma só vez e apenas carregada de acordo com a visibilidade na tela.

Por que precisamos do Módulo de rolagem virtual?

Considere que você tem uma IU com uma grande lista em que carregar todos os dados juntos pode ter problemas de desempenho. O novo recurso do Angular 7 Virtual Scrolling cuida do carregamento dos elementos visíveis ao usuário. Conforme o usuário rola, a próxima lista de elementos dom visíveis para o usuário é exibida. Isso proporciona uma experiência mais rápida e a rolagem também é muito suave.

Vamos adicionar a dependência ao nosso projeto -

npm install @angular/cdk –save

Concluímos a instalação da dependência do módulo de rolagem virtual.

Vamos trabalhar em um exemplo para entender melhor como podemos usar o módulo de rolagem virtual em nosso projeto.

Vamos primeiro adicionar o módulo de rolagem virtual dentro app.module.ts como 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 { }

Em app.module.ts, importamos o ScrollDispatchModule e o mesmo é adicionado à matriz de importações, conforme mostrado no código acima.

A próxima etapa é fazer com que os dados sejam exibidos na tela. Continuaremos a usar o serviço que criamos no capítulo anterior.

Vamos buscar dados do url, https://jsonplaceholder.typicode.com/photosque possui dados para cerca de 5000 imagens. Vamos obter os dados dele e exibir ao usuário usando o módulo de rolagem virtual.

Os detalhes no url, https://jsonplaceholder.typicode.com/photos são os seguintes -

São dados json que possuem url de imagem e url de miniatura. Mostraremos o url em miniatura aos usuários.

A seguir está o serviço que irá buscar dados -

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

Chamaremos o serviço de app.component.ts da seguinte forma -

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

Agora a variável albumdetails tem todos os dados da API e a contagem total é 5.000.

Agora que temos os dados prontos para serem exibidos, vamos trabalhar dentro de app.component.html para exibir os dados.

Precisamos adicionar a tag, <cdk-virtual-scroll-viewport></cdk-virtual-scroll-viewport>para trabalhar com o módulo de rolagem virtual. A tag precisa ser adicionada ao arquivo .html onde queremos que os dados sejam exibidos.

Aqui está o trabalho de <cdk-virtual-scroll-viewport> em 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 exibindo o id e o url em miniatura para o usuário na tela. Temos usado principalmente * ngFor até agora, mas dentro<cdk-virtual-scroll-viewport>, temos que usar * cdkVirtualFor para percorrer os dados.

Estamos fazendo um loop pela variável albumdetails que é preenchida em app.component.html. Há um tamanho atribuído à tag virtual [itemSize] = "20" que exibirá o número de itens com base na altura do módulo de rolagem virtual.

O css relacionado ao módulo de rolagem virtual é o seguinte -

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

A altura fornecida ao pergaminho virtual é 500px. As imagens que cabem nessa altura serão exibidas para o usuário. Concluímos a adição do código necessário para que nosso módulo de rolagem virtual seja visualizado.

A saída do Módulo de rolagem virtual no navegador é a seguinte -

Podemos ver que as primeiras 4 imagens são exibidas para o usuário. Especificamos a altura de 500 px. Há rolagem exibida para a tabela, conforme o usuário rola, as imagens que caberão naquela altura serão exibidas conforme mostrado abaixo -

As imagens necessárias são carregadas conforme o usuário rola. Esse recurso é muito útil em termos de desempenho. A princípio, ele não carrega todas as 5000 imagens, em vez disso, conforme o usuário rola, os urls são chamados e exibidos.