Usando un DataSource en Tablas
Contenido del curso
Maquetando con Tailwind
Componentes interactivos con Angular CDK
Drag and drop
Modales y listas
Table CDK
Próximos pasos para completar el Clon de Trello
Usando un DataSource en Tablas
Usando un DataSource en Tablas
Contenido del curso
Jhon Pabon
Max Andy Diaz Neyra
Gabriel Oswaldo Montoya Huamani
Brayan Julian Barbosa Sierra
jose zuñiga
muy buena clase , me quedo mas claro el concepto de behaviorsubject en esta clase que cuando inicie en angular en los primeros curso , he entendido mejor ya los componentes de angular
Codigo de la clase en Angular 19:
import { Component, computed, inject } from '@angular/core'; import { CdkTableModule } from '@angular/cdk/table'; import { rxResource } from '@angular/core/rxjs-interop'; import { CommonModule } from '@angular/common'; import { NavbarComponent } from '../../components/navbar/navbar.component'; import { ProductService } from '../../services/product.service'; import { BtnComponent } from '../../components/btn/btn.component'; import { Product } from '../../models/product.model'; @Component({ selector: 'app-table', imports: [NavbarComponent, CdkTableModule, CommonModule, BtnComponent], templateUrl: './table.component.html', }) export class TableComponent { private productService = inject(ProductService); readonly products = rxResource({ loader: () => this.productService.getProducts(), defaultValue: [], }); readonly totalPrice = computed(() => { const products = this.products.value(); return products.reduce((acc, product) => acc + Number(product.price), 0); }); private updateData(id: Product['id'], changes: Partial<Product>) { this.products.update((products) => products.map((product) => product.id === id ? { ...product, ...changes } : product, ), ); } update(product: Product) { this.updateData(product.id, { price: 20 }); } columns = ['id', 'title', 'price', 'cover', 'actions']; }
No use el DataSource
Muy hermosa es la programación reactiva. Y el profe lo explica de manera sencilla, muy buena clase nico bytes.
Pregunta: Cuando tenemos una tabla que es muy extensa en datos, hay alguna forma de mezclar la utilidad del virtual scroll en la tabla y no renderizar todos los items?
Pregunta: ¿En el caso de la inicialización de los datos no debería llamarse el servicio directamente en el data-source para eliminar esa lógica del componente y mantener todo en este archivo?. Hay alguna razón para no incluir el llamado del servicio o es solo criterio del desarrollador?