No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Conociendo los pipes

15/20
Recursos

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.

Aportes 16

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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 馃憦馃憦馃憦

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.

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

Pasos para crear peticiones HTTP

Pasos para crear un servicio de peticiones HTTP

En el servicio:

  1. 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 { }
  1. 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
  1. 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**
  ) { }
}
  1. 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.

  1. Importar el servicio donde manejaremos nuestro api
**import { ProductsService } from 'src/app/services/products.service';**
  1. Inyectar el servicio en el constructor: private productsService: ProductsService
  **constructor (
    private storeService: StoreService,
    private productsApi: ProductsService
  ){**
    this.myShopingCart = this.storeService.getProductsOnCart();
  **}**

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

  1. 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);
  }**
  1. 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);
  }**
}

2050鈥 vienes del futuro, eh?

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

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

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.

Aqu铆 la documentaci贸n oficial de Angular donde ofrece m谩s informaci贸n acerca del tema:

Super los Pipes muy aplicable para nuestros proyectos 馃榿

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

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

los pie son el equivalente a los helper en Laravel

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:

  1. {{ value | uppercase }} - Convierte el valor en may煤sculas
  2. {{ value | lowercase }} - Convierte el valor en min煤sculas
  3. {{ value | number }} - Formatea el valor num茅rico seg煤n las convenciones de formato regional
  4. {{ value | date }} - Formatea la fecha seg煤n las convenciones de formato regional
  5. {{ value | currency }} - Formatea el valor num茅rico como moneda seg煤n las convenciones de formato regional
  6. {{ value | async }} - Permite trabajar con observables y promesas en la plantilla
  7. {{ value | slice }} - Devuelve una parte de una cadena o un array
  8. {{ value | json }} - Muestra el objeto como una cadena JSON
  9. {{ value | percent }} - Convierte el valor en un porcentaje
  10. {{ value | decimal }} - Formatea el valor num茅rico como decimal

Conociendo los pipes

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