Transformación de Datos con Pipes en Angular

Clase 52 de 71 • Curso de Angular: Creación de Aplicaciones Web

Edgar Roy Huaman Pumachapi

student•

En la nueva version , cuando genera el componente product no viene importado el modulo common. Es por ello no funcionara los pipes. se tiene importar en de manera manual el commonModule

import { CommonModule } from '@angular/common';

José Luis Jiménez

student•

import { CurrencyPipe, DatePipe, UpperCasePipe } from '@angular/common';

@Component({
  selector: 'app-product',
  standalone: true,
  imports: [UpperCasePipe, CurrencyPipe, DatePipe],
  templateUrl: './product.component.html',
  styleUrl: './product.component.css'
})
export class ProductComponent {}
```Incluso, no es necesario importar todo el CommonModule, lo que puede hacer más pesada tu aplicación, pudes importar por separado cada uno de los pipes...La nueva versión de Angular es genial.

Juan Luis Oropeza

student•

asi es, pasaba lo mismo cuando intentabas usar NgFor o ngIf

Alben Daniel Bustamante Barrios

student•

Es más eficiente recibir esos datos ya formateados desde la API, o es mejor usar el pipe desde Angular?

Tengo un trabajo donde datos como la fecha y precios ya los formateo desde Java y Spring, pero veo mucho más práctico simplemente usar los pipes.

Mi pregunta es: ¿qué opción tiene mejor rendimiento?

Brian Baldeon

student•

me sumo a la pregunta de Daniel. Según el profe de mi universidad la responsabilidad siempre es mejor de la API. Pero, estaría bueno saber cuál es la que tiene mejor rendimiento..

Juan Camilo Salazar Serna

student•

(Si se puede), es mejor dejar los datos con el formato requerido desde el api, pues asi puedes consultarlo desde diferentes paginas y siempre te darán el mismo resultado.

Pero como a veces no podemos elegir, esta el pipe para ayudarnos a formatear datos a nuestro antojo.

Dave Juanes

student•

Importe CommondModule desde el .ts para que funcionen los pipes

Juan Esteban Valdés Ospina

student•

No aparecen las imagenes :(

Creo que es por esto , pero no se como arreglarlo.

Alguien sabe como solucionarlo ??

Jhonatan Gomez

student•

Buenas tardes!

creo que es un problema del api a la hora de crear los productos.

ya lo intente con el postman.json que esta en la documentación del api pero al parecer, inyectaron un error en el api a la hora de hacer el registro:

ANDRES ALFONSO MIRA MEJIA

student•

✅

Jair Alexander Hernández Rosero

student•

Hola, Se puede solo importar el commonModule global para los pipes:

import { CommonModule } from '@angular/common';

@Component({

selector: 'app-product',

standalone: true,

imports: [CommonModule], //aqui agregue el commonModule

templateUrl: './product.component.html',

styleUrl: './product.component.css'

})

Eduard Fabián Barón Gutiérrez

student•

El api tuvo cambios en las imágenes, no está igual que la documentación.

Por ahora mi solución fue ajustar las urls de las imágenes antes de asignar el response a los productos:

 ngOnInit() {
    this.productService.getProducts().subscribe({
      next: (products) => {
        const parsedProducts = products.map((product) => {
          return {
            ...product,
            images: product.images.map((image) => {
              return image.replaceAll(/\"|\[|\]/g, '');
            })
          }
        });
        
        this.products.set(parsedProducts);
      }
    });
  }

Igualmente sería bueno que lo ajustaran a como está la documentación @platzi

Roberto Gonzalez Perez

student•

Sabran si la API se cayó? Nada más fui a comer y al regresar ya no carga ningun producto

Arnoldo Jose González

student•

Me pasa lo mismo, pareciera que se ha caído

Christian Pastor Hernandez Hernandez

student•

| Barra vertical | pipe en ingles |