Inicio Blog arrow-menu-nigmacode Videos Cursos Foro

Pipes en Ionic


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:

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!

Tipos de pipes

Fechas

Como vimos en el ejemplo anterior, solo con a帽adir ya el pipe 鈥渄ate鈥 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 鈥渁pp.module.ts鈥 que se encuentra en la ruta 鈥渟rc/app/app.module.ts鈥 y las l铆neas que se sit煤an debajo de los comentarios del c贸digo:

Tras haber cambiando el idioma de la fecha, vamos a ver que otras posibilidades no ofrece el pipe date.

A帽adiendo la expresi贸n :鈥漨edium鈥 despu茅s del date, nos devolver铆a la fecha y la hora de la variable.

Si quisi茅ramos indicar el orden en el que queremos que aparezca nuestra fecha, podr铆amos hacerlo del siguiente modo:

En este caso, hemos mostrado la fecha en el orden 鈥渄d MMMM yyyy鈥, donde 鈥渄d鈥 es el dia, 鈥淢MMM鈥 el mes y 鈥測yyy鈥 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.

Cadenas de texto

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

Slices

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 鈥渘ombre鈥, que contiene 鈥渏ose鈥, donde la J ser谩 la posici贸n 0 y la e la 3.

Si quisi茅ramos mostrar la letra 鈥渆鈥, le indicar铆amos a nuestro pipe que la posici贸n que queremos mostrar es la 3.

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 鈥渏os鈥 de Jos茅, lo indicar铆amos de tal forma:

De la misma forma podr铆amos hacerlo con un array de n煤meros:

Decimales

Para este ejemplo utilizaremos la variable decimal:

El pipe que debemos utilizar para el trabajo con decimales ser铆a 鈥渘umber鈥, que nos mostrar谩 por defecto el numero con tres decimales:

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

Porcentajes

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:

El pipe que utilizaremos para trabajar con porcentajes ser谩 鈥減ercent鈥 .

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% -->

Monedas

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:

El nombre que tiene este pipe es 鈥渃urrency鈥 y si no le a帽adimos par谩metro alguno, el resultado ser铆a el siguiente:

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:

O incluso tambi茅n hacer uso de los indicadores de enteros y decimales como en los dos pipes anteriores:

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

Preguntas relacionadas

No hay preguntas sobre este art铆culo.

驴Tienes alguna duda sobre el art铆culo? 隆Pregunta!