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.
Introducción
¿Qué es el Angular CDK?
Instalando Angular CDK y TailwindCSS
Maquetando con Tailwind
Maquetando la página de login con Tailwind
Maquetando formularios con Tailwind
Componente de botón reutilizable
Reto: colores y propiedades dinámicas
Componentes interactivos con Angular CDK
Creando Overlays
Múltiples Overlays
Iconos en Angular con Font Awesome
Creando acordeones
Acordeones dinámicos
Drag and drop
Drag and drop con ordenamiento
Drag and drop con transferencia entre columnas
Drag and drop con columnas dinámicas
Modales y listas
Modales y diálogos
Modales recibiendo información
Listas con scroll
Listas con virtual scrolling
Table CDK
Tablas
Estilos en Tablas
Usando un DataSource en Tablas
Tablas con filtros y debounce
Próximos pasos para completar el Clon de Trello
Mejoras en UX y reusabilidad
Toma el Curso de Autenticación con Angular
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 5
Preguntas 0
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>
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>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?