Introducción a Pipes + trabajando con Pipes predefinidas

¿Qué son los Pipes?

Las pipes son una especie de tuberías que nos permitirán editar el formato con el que presentamos los valores de variables u objetos que recibimos desde el TypeScript del componente  gracias al binding de String interpolation mostrándolo un formato personalizado en nuestro template y sin ser modificado en el TypeScript de nuestro componente.

Para utilizar un pipe utilizamos la siguiente estructura:  {{value | pipeAUtilizar}}

Un ejemplo podría ser una conversión hacía dólares de la siguiente manera:

Los pipes nos permiten por tanto transformar visualmente nuestros datos, de esta manera podemos mostrar datos con una mejor experiencia de usuario

¿Porque trabajar con Pipes?

La principal ventaja de utilizar  pipes es que te nos vamos a ahorrar mucho código en los componentes, ya que podemos reutilizar código y no tener que escribir tanto código dentro de nuestros componentes facilitará la lectura además del mantenimiento de dicho componente.

Tipos de Pipes:

Dentro de los pipes existen dos tipos:

  • Los pipes predefinidos (Built-in): vienen por defecto en Angular.
  • Los pipes customizados (Custom): existe la posibilidad de crear nuestros propios Pipes que se adapten a nuestras necesidades.

Pipes predefinidos

Existen multitud de pipes en Angular, podéis encontrar más información en su en la web oficial de Angular

Vamos a ver nosotros algunos de ellos (aunque no todos).

UpperCasePipe:

Nos mostrará el valor del binding de String Interpolation en mayúsculas. Pero no modifica el valor de nombre en el componente o en la vista . Sino que lo hace solamente para la presentación de nuestro String Interpolation que va acompañado de dicho pipe.

LowerCasePipe:

Nos mostrará el valor del binding de String Interpolation en minúsculas.

KeyValuePipe:

Hasta ahora hemos estado trabajando siempre con String Interpolation, pero también podemos utilizarlo con alternativas como por ejemplo un *ngFor. KeyValuePipe, transforma Objeto o Mapa en una matriz de pares clave-valor.

Vamos a ver un ejemplo:

Incluso podríamos hacer cosas como esta con muy poco esfuerzo:

JsonPipe:

Convierte el valor en un formato JSON, en nuestro caso un objeto:

CurrencyPipe

Aunque ya hemos trabajado con el currencyPipe, otro ejemplo de este tipo de dato podría ser el siguiente:

Incluso podríamos sacar el símbolo de euros mediante al Pipe de currency:

Cada uno de los pipes que existen como el de currency son un mundo y podemos buscar mucha información de cómo funcionan para la función en concreto que queremos realizar con él.

Un ejemplo de ello, podría ser el poner la divisa que nos muestra el pipe en el lado derecho. Para ello, realizaríamos lo siguiente:

El resultado será:

TitleCasePipe:

Nos permite transformar la primera letra de cada palabra a mayúsculas y el resto de la palabra a minúsculas.

Un ejemplo podría ser:

DatePipe:

Nos permite formatear fechas:

SlicePipe:

Nos permite crear subconjuntos (cortar) un String o un Array de elementos:

DecimalPipe:

Transforma un decimal en una cadena, formateada de acuerdo con las reglas que le establecemos.

La regla la definimos de la siguiente manera:

  • El primer número nos permite definir la cantidad de números enteros.
  • El segundo número nos permite definir la cantidad mínima de números decimales.
  • El tercer número nos permite definir la cantidad máxima de números decimales.

Los números van separados entre si con un .

Vamos a ver otro ejemplo:

Espero que os haya gustado. Un saludo 🙂

3 comentarios

  1. Aw, this was a really nice post. Finding the time and actual effort to produce a very good article… but what can I
    say… I hesitate a whole lot and don’t seem to get anything done.

  2. I’ll right away take hold of your rss as I can’t find your e-mail subscription link or e-newsletter service.
    Do you’ve any? Please permit me understand so that I may just subscribe.
    Thanks.

  3. I do not know whether it’s just me or if perhaps everyone else experiencing problems with your blog.
    It appears as though some of the text in your content are running off the screen.
    Can someone else please comment and let me know if this is happening to them as
    well? This could be a issue with my internet browser because I’ve had this happen before.
    Kudos

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar