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
0:00/14:39
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?
Jhon Pabon
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
Max Andy Diaz Neyra
Gabriel Oswaldo Montoya Huamani
Muy hermosa es la programación reactiva. Y el profe lo explica de manera sencilla, muy buena clase nico bytes.
Brayan Julian Barbosa Sierra
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
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?
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