Cada vez que desarrollamos una aplicación mostramos información a partir de variables que recogen datos, como el nombre de un usuario, una fecha, un porcentaje… Pero no siempre la información que mostramos viene directamente con el aspecto final con el que el usuario se encontrará, como por ejemplo la fecha de hoy:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-pipes',
template: `<p>{{hoy}}</p>`,
styleUrls: ['./pipes.component.css']
})
export class PipesComponent {
hoy = new Date(); //Sun Jan 07 2018 01:57:24 GMT+0100 (Hora estándar romance)
constructor() { }
}La forma en la que aparece no sería la más conveniente para mostrar en nuestra aplicación.
Ahora veamos como añadiendo un pipe a nuestra fecha su aspecto sería muy distinto:
<p>{{hoy | date}}</p>La fecha ahora mostraría el valor Jan 7, 2018. Como éste, hay muchos más pipes que podemos utilizar en ionic gracias a angular, para modificar fechas, cadena de caracteres, números y más. He recuperado esta entrada de angular que escribí hace un tiempo, que funciona del mismo modo en ionic para que aprendas a utilizar sus pipes!
Como vimos en el ejemplo anterior, solo con añadir ya el pipe “date” conseguimos mostrar la fecha de una forma mucho más sencilla para el usuario. Aún tenemos más pipes para la fecha que nos pueden ayudar a mostrarla de diferente forma.
Antes de seguir con otro ejemplo del pipe date, os enseñaré el modo para que nos aparezca nuestra fecha en español. Para ello debemos dirigirnos a nuestro archivo “app.module.ts” que se encuentra en la ruta “src/app/app.module.ts” y las líneas que se sitúan debajo de los comentarios del código:
mport { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { PipesComponent } from './components/pipes/pipes.component';
//lineas que debemos añadir
import { LOCALE_ID } from '@angular/core';
import localeEs from '@angular/common/locales/es';
import { registerLocaleData } from '@angular/common';
registerLocaleData(localeEs);
@NgModule({
declarations: [
AppComponent,
PipesComponent
],
imports: [
BrowserModule
],
providers: [
//añadimos esta linea en el apartado de providers
{provide: LOCALE_ID, useValue:"es" }
],
bootstrap: [AppComponent]
})
export class AppModule { }Tras haber cambiando el idioma de la fecha, vamos a ver que otras posibilidades no ofrece el pipe date.
Añadiendo la expresión :”medium” después del date, nos devolvería la fecha y la hora de la variable.
<p>{{hoy | date:"medium"}}</p>
<!-- 7 ene. 2018 17:21:29-->Si quisiéramos indicar el orden en el que queremos que aparezca nuestra fecha, podríamos hacerlo del siguiente modo:
<td>{{hoy | date:"dd MMMM yyyy"}}</td>
<!-- 07 enero 2018 -->
En este caso, hemos mostrado la fecha en el orden “dd MMMM yyyy”, donde “dd” es el dia, “MMMM” el mes y “yyyy” el año. Podríamos cambiar el orden de la fecha a nuestro antojo, como por ejemplo, cambiando la posición de yyyy por dd y vicecersa, que nos daría como resultado: 2018 enero 07.
En las cadenas de textos vamos a utilizar dos pipes muy sencillos, que mostrarán la variable en mayúsculas y minúsculas.
<td>{{nombre | uppercase}}</td>
<!-- JOSE --><p>{{nombre | lowercase}}</p>
<!-- jose -->Los pipes slices nos permiten mostrar un fragmento tanto de números como de cadena de texto, de una forma muy sencilla, a partir de la posición de los valores de la variable.
En este caso seguiremos utilizando la variable anterior “nombre”, que contiene “jose”, donde la J será la posición 0 y la e la 3.
Si quisiéramos mostrar la letra “e”, le indicaríamos a nuestro pipe que la posición que queremos mostrar es la 3.
<td>{{nombre | slice:3}}</td>
<!-- e -->También podemos indicarle que muestre unos valores a partir de un rango, en este, las posiciones comenzarían desde el número 1 y no desde el 0.
Si quisiéramos mostrar “jos” de José, lo indicaríamos de tal forma:
<td>{{nombre | slice:0:3}}</td>
<!-- jos-->De la misma forma podríamos hacerlo con un array de números:
numeros = [1,2,3,4,5,6,7];
<td>{{numeros | slice:0:3}}</td>
<!-- 1,2,3 -->Para este ejemplo utilizaremos la variable decimal:
decimal = 2.123456789;El pipe que debemos utilizar para el trabajo con decimales sería “number”, que nos mostrará por defecto el numero con tres decimales:
<td>{{decimal | number}}</td>
<!-- 2.123-->Si queremos controlar, el numero de enteros que queremos que tenga debemos añadirle tres indicadores; el primero sería el numero de enteros que queremos que tenga, despues separaremos con un punto es indicador de enteros y añadiremos entre un guión los números mínimo y máximo que queremos que tenga.
En este caso indicaremos que la variable decimal tenga un número entero, que el mínimo decimal será cero y que su máximo dos:
<td>{{decimal | number:"1.0-2"}}</td>
<!-- 2.12-->
El pipe de porcentajes nos mostrará un porcentaje del número que contenga la variable y nos añadirá al final de la cantidad el símbolo del “%”.
La variable que hemos definido como ejemplo para este pipe será porcentaje:
porcentaje = 0.126;
El pipe que utilizaremos para trabajar con porcentajes será “percent” .
<td>{{porcentaje | percent}}</td>
<!-- 13%-->El pipe percent hace un redondeo con el tercer decimal, si el decimal hubiera sido menor a 6 el resultado hubiera sido 12%.
Podemos utilizar en este pipe, como en el de decimales, cuantos numero enteros y decimales queremos que tenga nuestro porcentaje:
<td>{{porcentaje | percent:'2.2-2'}}</td>
<!-- 12.60% -->Otro pipe que es de mucha utilidad es el que trabaja con las monedas.
En muchas aplicaciones, como tiendas virtuales, gestores… Debemos trabajar con precios. Con este pipe podemos definir como queremos que nos muestre la cantidad y qué moneda debe añadir al final.
La variable que utilizaremos en este caso se llamará dinero y tendrá el siguiente valor:
dinero = 1500.5;
El nombre que tiene este pipe es “currency” y si no le añadimos parámetro alguno, el resultado sería el siguiente:
<td>{{dinero | currency}}</td>
<!-- 1.500,50 $-->Como vemos, por defecto nos muestra la cantidad seguida del símbolo del dolar, si quisiéramos mostrar el símbolo del euro sería tan sencillo como añadir esto:
<td>{{dinero | currency:'EUR'}}</td>
<!-- 1.500,50 € -->O incluso también hacer uso de los indicadores de enteros y decimales como en los dos pipes anteriores:
<td>{{dinero | currency:'EUR':true:'4.0-0'}}</td>
<!-- 1.501 € se muestra el precio sin decimales-->Si quieres saber más formas de utilizar estos pipes y conocer otros, visita la pagina oficial de angular donde encontrarás información más detallada de cada uno de ellos: Angular pipes