Angular 4

Creación de un Pipe (Filtro) en Angular 4

Publicado el

Pipe Personalizado para Angular 4

Primero, que es un Pipe?, un Pipe es un filtro personalizado que sirve para modificar la forma como vemos la información en nuestra aplicación, como por ejemplo, si deseamos mostrar el formato de una moneda, redondear a la cantidad de decimales que requerimos, cambiar un titulo a un lazy url, etc., si no esta claro, lo veremos a continuación.

El ejemplo mas practico es el filtro de CURRENCY, en las versiones anteriores de Angular (Angular JS), para agregar el signo (S/. ) (Moneda Peruana), o algun otro simbolo de moneda, simplemente teniamos que agregar:

En las versiones siguientes, esta opcion quedo en el pasado, puesto que ahora solo nos permiten las siguientes opciones:

Si dejamos solo en CURRENCY, nos mostrara el signo del dolar, si queremos otro símbolo, podemos agregarle la definición PE, GER, US, EU, (aquí dejo el link de los símbolos: Formato de Monedas), y por ultimo si colocamos «TRUE» nos mostrara el símbolo.

Si queremos solucionar este y otros muchos casos donde queremos modificar como mostramos la información son los PIPES, para eso, creamos nuestro pipe con:

una vez creado nos aparecera de la siguiente manera:

Inicio de Pipe

para lo cual solo tenemos que agregar dos simples lineas:

lo único que hacemos es convertirlo a decimal, y luego agregar el símbolo S/. o cualquier otro símbolo y concatenarlo con redondeando a la cantidad de decimales deseados.

Deja un comentario