funcionan como una tubería y transforman el dato recibido por otro, depende de la lógica de cada Pipe. Existenten varios nativos que angular nos ofrece, en la documentación oficial podemos encontrar la especificación de cada uno.

También es posible generar pipes personalizados utilizando ng g p shred/name

Los pipe utilizan el decorador con el mismo nombre y con la propiedad name se identifican para ser utilizados en el HTML

@Pipe({
  name: 'exponential'
})

<p>{{ variable | uppercase}}</p>

Transforma el valor a mayusculas

<p>{{variable | slice : 0 : 20}}</p>

Corta la cantidad de caracteres a impimir primer valor inicial de la cadena de texto "0" y hasta el caracter "20".

<p>{{variable | currency}}</p>

Transforma el valor numerico a formato moneda. Tiene varias opciones para personalizar la salida.

Alguno de la documentacion oficial

• AsyncPipe

• DecimalPipe

• PercentPipe

• DatePipe

• TitleCasePipe

• UpperCasePipe

• CurrencyPipe

• I18nPluralPipe

• I18nSelectPipe

• JsonPipe

• KeyValuePipe

• SlicePipe

• LowerCasePipe

<aside> 💡 Todos los elementos o paquetes en angular se debe importar en el archivo del modulo que va a utilizar sea en el modulo mayor o en algún modulo especifico.

</aside>

con un pipe podemos limitar la ejecución de función por medio de funcion puras. Esto sobre todo cuando hacemos llamados grupales que cada vez que hacemos algo en el componente padre vuelve a renderizar los datos. técnica de rendimiento chagenDetection ver en el documento