No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Listas con scroll

17/24
Recursos

Aportes 5

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Como buena práctica es recomendable separar las funcionalidades segú el uso, para el caso de las peticiones http deberiamos crear un servicio con ng y para el caso de las interfaces deberiamos incluirlas dentro de nuestra carpeta models.

<div class="flex flex-col h-screen">
<app-navbar></app-navbar>
<div class="w-full grow bg-sky-600 p-6">
<div class="flex gap-4">
<div class="w-1/2">
<h1 class="text-white">List A (Normal scroll)</h1>
<div class="h-64 w-full border overflow-y-scroll bg-white rounded mt-2">
<div class="flex items-center space-x-4" *ngFor="let product of products">
<img class="w-10 h-10 rounded-full" [src]="product.images[0]" alt="">
<div class="space-y-1 font-medium dark:text-white">
<div>{{ product.title }}</div>
<div class="text-sm text-gray-500 dark:text-gray-400">${{product.price}}</div>
</div>
</div>
</div>
</div>
<div class="w-1/2">
<h1 class="text-white">List B (Virtual scroll)</h1>
</div>
</div>
</div>
</div>
Para los que estan en angular 18 y HttpClientModule ya esta en desuso para hacer la peticion http tienen que ir a app.config.ts y poner el providers provideHttpClient de la siguiente manera : ```js import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';import { provideRouter } from '@angular/router'; import { routes } from './app.routes';import { provideHttpClient } from '@angular/common/http'; export const appConfig: ApplicationConfig = {  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient()]}; ``` y listo, desde el componente ya se puede hacer peticiones http.
**scroll.component.ts** ```js import { Component, inject, signal } from '@angular/core'; import { NavbarComponent } from '../../components/navbar/navbar.component'; import { CommonModule } from '@angular/common'; import { ProductService } from '../../services/product.service'; interface Product { id: string; title: string; price: string; images: string[]; } @Component({ selector: 'app-scroll', standalone: true, imports: [CommonModule, NavbarComponent], templateUrl: './scroll.component.html', }) export class ScrollComponent { products: Product[] = []; private productService = inject(ProductService); constructor() {} ngOnInit() { this.getProducts(); } private getProducts(): void { this.productService.getProducts().subscribe((data) => { this.products = data; }); } } ```**product.service.ts** ```js import { HttpClient } from '@angular/common/http'; import { Injectable, inject } from '@angular/core'; interface Product { id: string; title: string; price: string; images: string[]; } @Injectable({ providedIn: 'root', }) export class ProductService { private http = inject(HttpClient); constructor() {} getProducts() { const url = new URL(`https://api.escuelajs.co/api/v1/products`); return this.http.get<Product[]>(url.toString()); } } ```

En la nueva versión de angular no tenemos el archivo app.module.ts Directamente lo incorporamos en el .ts del componente o la página que creamos. Dejo mi código a continuación, también cambió la forma de escribir los *ngFor pero se puede utilizar la antigua, eso no afecta en nada

archivo scroll.component.ts

import { Component } from '@angular/core';
import {ScrollingModule} from '@angular/cdk/scrolling';
import { CommonModule } from '@angular/common';
import { NavbarComponent } from '../../components/navbar/navbar.component';
import { HttpClient, HttpClientModule } from '@angular/common/http';

interface Product {
  id: string;
  title: string;
  price: string;
  images: string[];
}

@Component({
  selector: 'app-scroll',
  standalone: true,
  imports: [CommonModule, ScrollingModule, NavbarComponent, HttpClientModule],
  templateUrl: './scroll.component.html'
})
export class ScrollComponent {

  products: Product[] = [];

  constructor(
    private http: HttpClient
  ) { }

  ngOnInit(): void {
    this.http.get<Product[]>('https://api.escuelajs.co/api/v1/products')
    .subscribe(data => {
      this.products = data;
    })
  }
}

archivo scroll.component.html

<div class="felx flex-col h-screen">
  <app-navbar></app-navbar>
  <div class="w-full grow bg-sky-600 p-6 h-full">
    <div class="flex gap-4">
      <div class="w-1/2">
        <div class="text-white">
          <h1>List A (Normal scroll)</h1>
          <div class="h-64 w-full border overflow-y-scroll bg-white rounded-lg mt-2">
            @for (product of products; track product.id) {
              <div class="flex items-center gap-4" >
                <img class="w-10 h-10 rounded-full" [src]="product.images[0]" alt="">
                <div class="font-medium dark:text-white">
                    <div>{{ product.title }}</div>
                    <div class="text-sm text-gray-500 dark:text-gray-400">{{ product.price }}</div>
                </div>
              </div>
            }
          </div>
        </div>
      </div>
      <div class="w-1/2">
        <div class="text-white">
          <h1>List B (Virtual scroll)</h1>
        </div>
      </div>
    </div>
  </div>
</div>