Virtual Scroll Angular, pipes HTML, CryptoNG

Le vamos a dar los últimos detalles a nuestra aplicación y que mejor manera que implementando un Virtual Scroll y los pipes para nuestras monedas y porcentaje.

Empecemos para el Virtual Scroll para ello vamos a instalar la dependencia que vamos a necesitar con el siguiente comando:

npm install @angular/cdk

Luego la importaremos en nuestro app.module.ts para poderla usar luego.

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ScrollingModule } from '@angular/cdk/scrolling'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule, //<=== ***
    ScrollingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Listo ahora tenemos que agregar el Vitual Scroll en la tabla de nuestro HTML de la siguiente manera

<header class="header">
  <h1>💰 CryptoNG 🤑</h1>
  <small>Precios de criptomonedas de hoy por capitalización de mercado</small>
</header>
<section class="section">

  <cdk-virtual-scroll-viewport style="height: 300px;width: auto;" [itemSize]="20">
    <table style="width:100%">
      <tr>
        <th>ID</th>
        <th>Nombre</th>
        <th>Precio</th>
        <th>Ultimas 24h</th>
        <th>Ultimos 7D</th>
      </tr>
      <tr *ngFor="let crypto of cryptos | async">
        <td>{{crypto.id}}</td>
        <td>{{crypto.name}}</td>
        <td>{{crypto.quote.USD.price}}</td>
        <td>{{crypto.quote.USD.percent_change_24h}}</td>
        <td>{{crypto.quote.USD.percent_change_7d}}</td>
      </tr>
    </table>
  </cdk-virtual-scroll-viewport>
  
</section>
<footer class="footer">
  <p><a href="https://aquiensistemas.com"> Aquí en sistemas</a> - 2021</p>
  <small>Encuentra este proyecto en <a href="https://github.com/aquiensistemas/crypto-ng">GITHUB</a></small>
</footer>

Ya tenemos implementado el Virual Scroll pero aun nos resta agregar los pipes para la moneda y los porcentajes que mostramos en la pantalla. Adicional agregaremos la numeración en vez del ID en nuestra tabla.

Finalmente nuestro proyecto lo tenemos de esta forma:

Siguiente tema

Anterior

Deja un comentario