Qué son los Pipes en Angular
Los pipes son tuberías o canales los cuales son denotados con el carácter |, una de las ventajas de utilizarlas es que se pueden usar en toda la aplicación. En estos tenemos un flujo de información como el siguiente ejemplo.
Input: Hace referencia al valor de entrada, el cual va a ser sometido a un proceso de transformación.
Transform: Es el proceso al cual sometemos esta información, por ejemplo convertir un string a mayúsculas o minúsculas
Output: Es el valor resultante de la transformación
Una característica de estos es que podemos pasar el output de un Pipe a otro
Los pipes son operadores que se utilizan dentro de las llaves de interpolación, estos deben ser utilizados en las plantillas HTML de nuestro proyecto.
{{ nombre | uppercase }}Angular ya cuenta con algunos Pipes incorporados para realizar diferentes transformaciones, desde una fecha hasta generar internacionalización (i18n), si queremos usar una funcionalidad la cual no está incorporada podemos generar pipes personalizados o que se adapten a estas necesidades.
Algunos Pipes mas conocidos o usados en Angular
Uppercase
Uppercase recibe un string y nos retorna el mismo valor en mayúsculas.
{{ nombre | uppercase }}LowerCase
En el caso de LowerCase nos permite convertir el string completamente en minúsculas.
{{ nombre | lowercase }}Currency
En este caso nos permite dar el signo o convertir un valor numérico en un string con la moneda que especifiquemos.
{{ moneda | currency:'ARS' }}Date
Este es posiblemente uno de los más usados o conocidos, como su nombre lo indica es para manipular fechas, si bien podemos usar los “preestablecidos” por el framework como ‘short’ también podemos generar personalizados.
{{ today | date }}
{{ today | date:'short'}}
{{ today | date:'yyyy-dd-MM}} //PersonalizadoTitleCase
Uno de los pipe que más vidas va a salvar, nos puede servir tanto para nombres como para títulos, su función es poner la primer letra del string en mayúscula y el resto a minúscula.
{{ titulo | titlecase }}Para nuestra suerte estos no son los únicos disponibles en la API de Angular, es por eso que te recomiendo revisar la documentación en la cual encontraras todos los PIPES que tenemos disponibles hoy en día.
Ahora también veamos cómo crear los nuestros, para así realizar la acción que necesitemos, para ello vamos a generar uno que realiza la concatenación de un mensaje y retornarlo.
Creando nuestro propio Pipe
Para crear uno debemos correr un simple comando del CLI de Angular en este caso lo llamaremos concatMessage
ng g p pipes/concatMessageEl flag p hace referencia a pipe, también creamos una carpeta pipes en la cual guardaremos todos los que generemos nosotros mismos.
Este comando nos retornará la creación de dos archivos.
- concat-message.pipe.spec.ts
- concat-message.pipe.ts
En nuestro caso usaremos concat-message.pipe.ts en el cual escribiremos toda la lógica de nuestro custom pipe.
// Archivo concat-message.pipe.tsimport { Pipe, PipeTransform } from '@angular/core';@Pipe({
name: 'concatMessage',
})
export class ConcatMessagePipe implements PipeTransform {
transform(value: string): string {
return value + 'Cree un Pipe';
}
}
Para fines prácticos acudiremos al archivo app-component.html en el cual usaremos este pipe que nosotros mismos creamos.
// Archivo app-component.html<h2> {{'Soy Francisco y ' | concatMessage }} </h2>
Como resultante obtenemos el siguiente mensaje 👇👇👇
Soy Francisco y Cree un Pipe
Revisemos que puse a modo ejemplo una cadena ‘Soy Francisco y ’ en este caso podemos usar una cadena directamente, lo importante es mantener consistencia entre los tipos de datos.
Como podemos notar los pipes nos simplifican muchas tareas por lo cual como programadores nos va a ayudar mucho. La documentación de Angular es muy buena en este tema y siempre que necesitemos algo vamos a poder recurrir a ella.
Seguire creando contenido relacionado a Angular por lo cual Espero que les sea de ayuda y espero su Feedback.
Sigueme en Twitter para estar en contacto y saber que les gustaria ver🐧
