Cursos Empresas Blog Live Conf Eventos Precios

0:006:44

Recursos

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.

Uso de Pipes en Angular: Transformación y Formatos

Curso de Angular: Componentes y Servicios

Clase 15 de 20

Clase 15 / 20

jose zuñiga

Hace 3 años

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

Hace 3 años

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

Comentarios (18)18 comentarios

Cecilia Riveros

Hace 5 años

Para ver mas sobre los pipe https://aristotekean.medium.com/tipos-de-pipes-en-angular-d736079491b1

Julian Henao Henao

gracias

Kevin Bueno

Ese soy yo, gracias por compartir

William Ibañez

Importante nota: Los pipes no se utilizan en el Typescript van directamente en el html!!!

David Castro

Hace 4 años

Entendido, Gracias por la aclaración Bro.

Carlos Dugarte

Tengo experiencia con Angular y estoy haciendo estos cursos como repaso, la importancia de estar atento a nuevas herramientas. No sabía que había un pipe de fechas, particularmente usaba la librería moment(). Algo nuevo que aprendí en la clase 👏👏👏

Jimmy Buriticá Londoño

Pipes

Los pipes son una herramienta de Angular que nos permite transformar visualmente la información, por ejemplo, cambiar un texto a mayúsculas o minúsculas, o darle formato de fecha y hora, formatos numéricos. El valor de la información transformada no cambia, sólo lo hace su aspecto.

Efrain Montealegre Raga

Gracias por la explicacion tan clara!

Diego Nicolás La Faye Arana

Una pregunta, si quisiera almacenar una fecha con ese formato del pipe Date, ¿Cómo se haría? puesto que veo que los pipes son para mostrar los datos con el formato pero no para almacenarlos

Anderson Castellon

Lo que puedes hacer para almacenar una fecha formateada con el datePipe, es usar el datePipe en el .ts de el componente o servicio (donde quede mejor según el orden de tu código)

const formatedDate = new DatePipe('en-US').transform(new Date())

El pipe recibe el LOCALE_ID de la app que identifica al idioma en que se mostrarán algunos textos y formatos dentro de la app.

Puedes ver más en el código fuente en el repo de Angular

Alejandro Mejia Escobar

Me da la impresión que el video tiene un corte extraño en el minuto 3:00, como si se hubiera cortado una parte de la explicación

Emmanuel Jose Lamprea Florez

Hola Alejandro, Al parecer si hubo un corte y creo que fue por lo que esta explicando en el min 3:17.

Ahorra Seguros

2050.. vienes del futuro, eh?

Nahuel Soma

Se pueden ver todos los pipes disponibles de Angular en la doc oficial:

https://angular.io/api?type=pipe

Kevin Candia

Importante mencionar que la transformación de los pipe solo es para mostrarla por pantalla, no puedes manipurala transformada, si se utiliza el pipe uppercase, y luego quieres trabajarla en el ts, esta no estará en uppercase en el ts.

Darwing Steven Sánchez Londoño

Aquí la documentación oficial de Angular donde ofrece más información acerca del tema:

Jully Evangelina Flórez Fonseca

Super los Pipes muy aplicable para nuestros proyectos 😁

Santiago Velandia Gallo

Alguien sabe como cambiar para que muestre el formato en español?

Tendrías que personalizarlo, yo lo hice de esta manera

<p>{{ date | date : "d 'de' MMM h:mm" }}</p>

Platzi Team

Conociendo los pipes

Los pipes en Angular son una herramienta que permite transformar los datos que se muestran en la plantilla de una manera sencilla y flexible. Los pipes se utilizan para formatear, filtrar, ordenar y transformar datos de una variedad de maneras.

En general, los pipes reciben un valor de entrada y lo transforman en un valor de salida, que se muestra en la vista. Los pipes pueden encadenarse, lo que significa que se pueden aplicar varios pipes a la vez, lo que permite transformar aún más los datos.

{{ value | uppercase }}
{{ 'dsa' | uppercase }} => 'DSA'

Algunos de los Pipes mas populares o utiles:

{{ value | uppercase }} - Convierte el valor en mayúsculas
{{ value | lowercase }} - Convierte el valor en minúsculas
{{ value | number }} - Formatea el valor numérico según las convenciones de formato regional
{{ value | date }} - Formatea la fecha según las convenciones de formato regional
{{ value | currency }} - Formatea el valor numérico como moneda según las convenciones de formato regional
{{ value | async }} - Permite trabajar con observables y promesas en la plantilla
{{ value | slice }} - Devuelve una parte de una cadena o un array
{{ value | json }} - Muestra el objeto como una cadena JSON
{{ value | percent }} - Convierte el valor en un porcentaje
{{ value | decimal }} - Formatea el valor numérico como decimal

Dejo aqui buena documentación al respecto https://www.acontracorrientech.com/pipes-en-angular-guia-completa/

Que bien, gracias Willian por tu aporte!

Jhan Ronaldo Antezana Yana

Documentación de los Pipes: https://angular.io/api/common#pipes

Lázaro José Pérez Rodríguez

los pie son el equivalente a los helper en Laravel

Miguel Angel Reyes Moreno

Los pipes de angular los debemos usar en el HTML, no se utilizan desde TypeScript.

Recursos

Resumen

Uso de Pipes en Angular: Transformación y Formatos

Progreso del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida