Usando un DataSource en Tablas

Clase 21 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS

Jhon Pabon

student•

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

Gabriel Oswaldo Montoya Huamani

student•

Muy hermosa es la programación reactiva. Y el profe lo explica de manera sencilla, muy buena clase nico bytes.

Brayan Julian Barbosa Sierra

student•

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?

jose zuñiga

student•

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?

Max Andy Diaz Neyra

student•

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

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'];
}

Usando un DataSource en Tablas

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