Una guía completa de tuberías en angular

Las tuberías en Angular permiten a los usuarios transformar los datos antes de que se muestren en la vista. Las tuberías son similares a los filtros en otros lenguajes de programación, pero son más flexibles y se pueden personalizar para satisfacer necesidades específicas. Aquí, explorará cómo usar tuberías en su aplicación Angular.

¿Qué son las tuberías en Angular?

Las tuberías angulares son transformadores de datos que hacen que su aplicación sea más dinámica. Toman un valor como entrada y devuelven un valor transformado como salida. La transformación de datos puede ser tan simple como dar formato a una fecha o moneda, o tan compleja como filtrar u ordenar una lista de elementos.

Puedes usar las tuberías. en sus componentes angulares y sus plantillas. Las canalizaciones son fáciles de usar y puede encadenarlas para crear transformaciones más complejas.

Angular proporciona varias tuberías integradas que incluyen

Tubería de fecha, UpperCasePipe, Tubería Minúscula, MonedaTubo, tubería decimal, Porcentaje de tubería, JsonPipe, RebanadaTubo, y Tubería asíncrona. También proporciona la funcionalidad para crear tuberías personalizadas.

Cada tubería angular incorporada realiza una función única y puede ayudarlo a transformar datos.

Tubería de fecha

El Tubería de fecha formatos y pantallas sus variables de fecha y hora en un formato específico, teniendo en cuenta su configuración regional. A diferencia de otros marcos que requieren Paquetes de JavaScript para dar formato a la fecha y la hora, Angular usa el Tubería de fecha. Usar Tubería de fecha en su aplicación, agregue el símbolo de tubería (|) seguido de fecha y cualquier parámetro adicional.

Por ejemplo:

<p>Today's date is {{ currentDate | date }}p>

En este ejemplo, usted pasa el fecha actual variables a través de Tubería de fecha, que luego lo formatea de acuerdo con el formato de fecha predeterminado. Tú defines el fecha actual variable en el archivo TypeScript de su componente.

Aquí hay un ejemplo:

import { Component } from'@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
exportclass AppComponent {
 currentDate: any = newDate();
}

También puede pasar parámetros adicionales al Tubería de fecha para personalizar la salida:

<p>Today's date is {{ currentDate | date:'shortDate' }}p>

El bloque de código anterior pasó el cita corta parámetro a la Tubería de fecha. Esto le dice al Tubería de fecha para formatear la fecha usando el formato de fecha corta. junto a la cita corta parámetro, puede configurar el Tubería de fecha usando varios parámetros, incluyendo z, fechalargay formatos de fecha personalizados como dd/MM/AA.

UpperCasePipe y LowerCasePipe

El UpperCasePipe y Tubería Minúscula Transforma tus textos. Transformas tus textos a mayúsculas usando el UpperCasePipe y minúsculas usando el Tubería Minúscula.

Usar el UpperCasePipe y Tubería Minúscula, agregue el símbolo de tubería (|) seguido de minúsculas usar el Tubería Minúscula o mayúscula usar el UpperCasePipe.

A continuación se muestra un ejemplo de cómo utilizar el UpperCasePipe y Tubería Minúscula:

<p>{{ message | uppercase}}p>
<p>{{ message | lowercase}}p>

MonedaTubo

Utilizando el MonedaTubo, puede formatear números a una moneda en su aplicación. El MonedaTubo da formato a los números de acuerdo con su configuración regional. Para formatear sus números usando el MonedaTubo, utilice el símbolo de tubería seguido de divisa.

Por ejemplo:

<p>{{ number | currency }}p>

En este ejemplo, el MonedaTubo convierte la variable numérica en una moneda. Por defecto, el MonedaTubo convierte variables a dólares. Para cambiar esto, puede configurar el MonedaTubo para convertir a otras monedas pasando parámetros adicionales.

Aquí hay un ejemplo:

<p>{{ number | currency: 'GBP' }}p>

Aquí, pasas el GBP parámetro a la MonedaTubo. Esto asegura que el número la variable se convierte a la moneda de la libra esterlina.

DecimalPipe y PercentPipe

El tubería decimal transforma sus números en decimales, mientras que el Porcentaje de tubería convierte sus números a porcentajes.

Usar el tubería decimal, utilice el símbolo de tubería seguido de número y parámetros adicionales. Usar el Porcentaje de tubería, haga lo mismo pero reemplace el número con por ciento sin parámetros adicionales.

Por ejemplo:

<p>{{ number | number: '1.2-3' }}p>
<p>{{ number | percent }}p>

Los parámetros adicionales pasados ​​al tubería decimal controlar el número de dígitos enteros y fraccionarios mostrados. El 1 El parámetro especifica que debe haber al menos un dígito entero. En comparación, el 2.3 El parámetro especifica que debe haber al menos dos y hasta tres dígitos fraccionarios.

JsonPipe

El JsonPipe es una canalización integrada que convierte los datos en un formato de cadena JSON. Se utiliza principalmente con fines de depuración. Puedes usar el JsonPipe tanto en objetos como en matrices.

La sintaxis para usar el JsonPipe es como sigue:

{{ expression | json }}

Aquí, expresión son los datos que desea convertir a formato JSON. El operador de tubería (|) aplica el JsonPipe a la expresión.

Por ejemplo, defina un objeto y una matriz en su componente:

import { Component } from"@angular/core";
@Component({
 selector: "app-root",
 templateUrl: "./app.component.html",
 styleUrls: ["./app.component.scss"],
})
exportclass AppComponent {
 user: data = {
 firstname: "John",
 lastname: "Doe",
 };
 profiles: data[] = [
 {
 firstname: "John",
 lastname: "Doe",
 },
 {
 firstname: "Peter",
 lastname: "Parker",
 },
 ];
}
interface data {
 firstname: string;
 lastname: string;
}

El bloque de código anterior define un usuario objeto y un perfiles formación. Ahora, puedes usar el JsonPipe para convertir el objeto y la matriz en JSON.

<p>{{ user | json}}p>
<p>{{ profiles | json}}p>

Aquí el JsonPipe convertirá el usuario objeto y el perfiles array en una cadena JSON, que puede inspeccionar rápidamente en sus plantillas durante el desarrollo o la depuración.

RebanadaTubo

El RebanadaTubo es muy similar al JavaScript rebanada() método. El RebanadaTubo formatea matrices o cadenas extrayendo sus elementos para crear nuevas matrices o cadenas.

Usar el RebanadaTubo, se utiliza el símbolo de tubería seguido de rebanada y dos parámetros, los índices inicial y final. El índice de inicio es la posición en la matriz o cadena donde la tubería comenzará a extraer elementos, y el índice final es donde la tubería dejará de extraer elementos.

Aquí hay un ejemplo de cómo usar el RebanadaTubo:

<p>{{ string | slice: 0:2}}p>
<p>{{ array | slice: 0:1}}p>

En este ejemplo, el RebanadaTubo extraerá los dos primeros elementos de la cadena variable, el elemento en el índice 0 y el elemento en el índice 1. Además, extraerá el primer elemento del formación variable. El RebanadaTubo es útil cuando desea mostrar solo una parte de los datos en la plantilla.

Tubería asíncrona

Tubería asíncrona es una tubería angular incorporada que se suscribe y cancela automáticamente la suscripción a un Observable o Promise. Devuelve el último valor emitido por el Observable o Promise.

La sintaxis para usar Tubería asíncrona es como sigue:

{{ expression | async }}

Aquí, la expresión es el Observable o la Promesa a la que desea suscribirse.

Por ejemplo:

let numbers = of(1, 2, 3, 4, 5);

Puedes usar Tubería asíncrona para suscribirse a este Observable y mostrar el último valor emitido como este:

<p>{{ numbers | async }}p>

Este bloque de código generará el último número emitido por el Observable. Tubería asíncrona es muy útil cuando se manejan operaciones asincrónicas en sus plantillas. Se suscribe automáticamente al Observable o Promise cuando el componente se inicializa y cancela la suscripción cuando se destruye.

Encadenamiento de Tuberías en Angular

Puede encadenar tuberías para realizar múltiples transformaciones en una sola expresión. Encadenar tuberías es tan simple como usar numerosos operadores de tubería (|) en una sola expresión. La salida de cada tubería se convierte en la entrada de la siguiente.

Aquí está la sintaxis básica:

<p>{{ expression | pipe1 | pipe2 |... }}p>

Por ejemplo, puede transformar un objeto de fecha en una cadena usando el Tubería de fecha y luego convertir esa cadena a mayúsculas usando el UpperCasePipe.

<p>Today's date is {{ currentDate | date:'shortDate' | uppercase }}p>

Crear aplicaciones dinámicas usando tuberías

Las tuberías son una característica poderosa en Angular que le permite transformar datos antes de que se muestren en la vista. Aquí, aprendió sobre las diversas tuberías integradas que ofrece Angular, como DatePipe, CurrencyPipe, UpperCasePipe, etc. También aprendió a usarlos en su aplicación para crear contenido más dinámico. Usando tuberías, los desarrolladores pueden crear aplicaciones web más flexibles y dinámicas con menos código.