Uso de Pipes en Angular: Transformación y Formatos

Cursos Empresas Blog Live Conf Precios

Contenido del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

20
Componentes y Servicios en Aplicaciones Web
01:09 min

Tomar examen

Uso de Pipes en Angular: Transformación y Formatos

Resumen

Si vamos a estar conociendo los pipes debemos empezar por definirlos, un Pipe es una función pura, o sea, una función que dado un determinado valor siempre devolverá el mismo resultado.

Los Pipes no modifican el valor de un dato, simplemente le cambian el aspecto visual, Angular utiliza el concepto de Pipes para la transformación de datos.

Tipos de pipes

Angular posee por defecto algunos pipes que puedes utilizar para transformar números, fechas o cadenas de texto. Veamos los más importantes:

DatePipe: Modifica fechas de acuerdo al formato necesitado.
UpperCasePipe: Convierte todo el texto a mayúscula.
LowerCasePipe: Convierte todo el texto en minúscula.
CurrencyPipe: Convierte un número a la moneda o divisa necesitada.

Podrás encontrar en la documentación oficial de Angular más Pipes y su funcionamiento.

Utilizando pipes

Los pipes se utilizan fácilmente en el HTML haciendo uso del carácter "|" seguido del nombre del pipe.

<div>
  {{ "hola soy platzi" | uppercase }}
</div>
<div>
  {{ 1000 | currency:'USD' }}
</div>

En los ejemplos anteriores, se mostrará en la vista el testo HOLA SOY PLATZI completamente en mayúscula y el número 1000 en formato $1,000.00. En algunos casos, los pipes reciben parámetros de configuración, como el caso del pipe currency que recibe :'USD' para indicar el tipo de divisa.

Contribución creada con los aportes de Kevin Fiorentino.

jose zuñiga

Estudiante

Pasos para crear peticiones HTTP

Pasos para crear un servicio de peticiones HTTP

En el servicio:

Llamar el modulo de la biblioteca de Angular para poder manejar peticiones HTTP

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
**import { HttpClientModule } from '@angular/common/http';**

@NgModule({
  declarations: [
		...componentes
  ],
  imports: [
		...otros modulos,
    **HttpClientModule**
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Crear el servicio desde la terminal que se dedique a administrar las peticiones a una API. En este caso lo llamaremos products porque vamos a usar una api para obtener productos ficticios

ng g s services/products

Importar del módulo HttpClientModule la función HttpCliente en el servicio products e inyectar el servicio en el constructor. Esta librería nos permite manejar peticiones similares a librerías de REACT como axios.

Para usarlo debemos hacer una inyección de dependencias en nuestro servicio. En este caso el servicio HttpClient se inyecta sobre nuestro servicio products

import { Injectable } from '@angular/core';
**import { HttpClient } from '@angular/common/http';**

@Injectable({
  providedIn: 'root'
})
export class ProductsService {

  constructor(
    **private http: HttpClient**
  ) { }
}

Ahora podemos acceder al metodo para hace la petición de la API para poder llamarlo cuando desemos se recomienda implementarlo dentro de una función del servicio:

return this.http.get<Product[]>(”https://fakestoreapi.com/products”);

El api genera datos con una serie de datos que por buenas prácticas debe ser estipulada dentro de una interfaz que asigne el tipo de valor esperado. Puedes declararlos dentro de una carpeta models/nombreInterfaz.model.ts la siguiente estructura es la usada como products.model.ts:

id:string;
  title: string;
  price: number;
  description**?**: string;
  category**?**: string;
  image: string;
  rating**?**: {
    "rate": 3.9,
    "count": 120
  }

Nota: Podemos usar ahora la interfaz dentro de los datos obtenidos desde la api para designar el tipo de variable dentro de nuestra petición

import { Injectable } from '@angular/core';
**import { HttpClient } from '@angular/common/http';
import { Product } from '../models/product.model';**

@Injectable({
  providedIn: 'root'
})
export class ProductsService {

  constructor(
    private http: HttpClient
  ) { }
  **getAllProducts(){
    return this.http.get<Product[]>("https://fakestoreapi.com/products");
  }**
}

En el componente:

Ahora podemos llamar el servicio para obtener los datos de los productos. Ten muy en cuenta que se trata de una petición asincrona y debes implementarla dentro de un Hook que pueda trabajar con estas peticiones. La más común es ngOnInit.

Importar el servicio donde manejaremos nuestro api

**import { ProductsService } from 'src/app/services/products.service';**

Inyectar el servicio en el constructor: private productsService: ProductsService

  **constructor (
    private storeService: StoreService,
    private productsApi: ProductsService
  ){**
    this.myShopingCart = this.storeService.getProductsOnCart();
  **}**

  **products : Product[] = [];**

Crear un método que nos permita traer los valores como es una petición asíncrona usaremos el Hook ngOnInit para hacer el llamado.

**ngOnInit(): void{
    this.productsApi.getAllProducts()
      .subscribe(data => this.products = data);
  }**

La libreria del modulo Http tiene un método denominado .subscribe con el vamos a obtener los datos que se han obtenido desde el Json que es la respuesta de la petición.

this.productsApi.getAllProducts()
	**.subscribe(data => this.products = data);**

Este es el script completo:

import { Component, OnInit } from '@angular/core';
import { Product } from 'src/app/models/product.model';
import { StoreService } from 'src/app/services/store.service';
**import { ProductsService } from 'src/app/services/products.service';**

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.scss']
})
export class ProductsComponent {
  **constructor (
    private storeService: StoreService,
    private productsApi: ProductsService
  ){**
    this.myShopingCart = this.storeService.getProductsOnCart();
  **}**

  **products : Product[] = [];**

  myShopingCart: Product[] = [];
  countProductOnCart: number = 0;
  totalProductOnCart: number = 0;

  addProductToCart(producto:Product){
    this.myShopingCart = this.storeService.addProductToCart(producto);
    this.countProductOnCart = this.storeService.getCountProductsOnCart();
    this.totalProductOnCart = this.storeService.getTotalProductOnCart();
  }

  **ngOnInit(): void{
    this.productsApi.getAllProducts()
      .subscribe(data => this.products = data);
  }**
}

Brandon Lee Aguero Fernandez

Estudiante

Creo que este aporte debería de ir en la anterior clase 😅

Cecilia Riveros

Julian Henao Henao

Kevin Bueno

William Ibañez

David Castro

Carlos Dugarte

Jimmy Buriticá Londoño

Efrain Montealegre Raga

Diego Nicolás La Faye Arana

Anderson Castellon

Alejandro Mejia Escobar

Emmanuel Jose Lamprea Florez

Ahorra Seguros

Nahuel Soma

Kevin Candia

Darwing Steven Sánchez Londoño

Jully Evangelina Flórez Fonseca

Santiago Velandia Gallo

Platzi Team

Jhan Ronaldo Antezana Yana

Lázaro José Pérez Rodríguez

Miguel Angel Reyes Moreno

Componentes

Desarrollo de Tienda Online con Angular Avanzado

Creación y Gestión de Componentes en Angular

Comunicación de Componentes: Envío de Datos con Inputs en Angular

Comunicación de Eventos entre Componentes en Angular

Creación y Reutilización de Componentes en Angular para Tiendas

Ciclo de Vida de Componentes en Angular: Constructor a OnDestroy

Manejo de eventos y limpieza en Angular con ngOnDestroy y setters

Componentes en Angular: Creación y Organización de Productos

Estilos en Angular: Alcance y Maquetación de Componentes

Despliegue Dinámico de Menú Lateral en Angular

Comunicación Padre-Hijo con Inputs y Outputs en Angular

Servicios

Creación y uso de servicios en Angular para lógica de negocio

Inyección de Dependencias en Angular: Conceptos y Funcionamiento

Conexión a APIs usando HTTP Client Module en Angular

Pipes y Directives