¿Cómo crear una tubería personalizada en AngularJS?

En este artículo, aprenderemos cómo generar tuberías personalizadas además de usar tuberías integradas en Angular y también exploraremos su implementación. Pipe es una función que se utiliza para modificar los datos antes de mostrarlos al usuario. Algunas de las tuberías preconstruidas son fecha, mayúsculas, minúsculas, moneda, decimal, número, etc. Angular tiene una característica poderosa llamada Enlace de datoslo que nos ayuda a vincular la propiedad de la clase a la propiedad del elemento HTML. A veces, necesitamos mostrar datos con el formato correcto antes de mostrárselos al usuario. Por ejemplo, si necesitamos imprimir la fecha, puede suceder que se imprima un formato largo de fecha que puede ser irrelevante para el usuario. Por esta razón, las tuberías se utilizan para transformar los datos antes de que se muestren en el navegador. Podemos cambiar los valores de las propiedades usando tuberías para que sean más fáciles de usar o apropiados para el área específica. Podemos asumir tuberías como funciones que pueden tomar parámetros, realizar cálculos y devolver algo. Las tuberías toman strings, enteros, fechas y arrays como un valor de entrada separados por ‘|’ seguido del nombre de la canalización y devuelve el resultado formateado. Los parámetros se definen incluyendo dos puntos y el valor del parámetro.<nombre de archivo>.pipe.ts . La sintaxis para mostrar el valor transformado mediante una canalización en la expresión de plantilla de componente es la siguiente:

Sintaxis:

{{ inputValue | pipename : parameter }}

Sin embargo, podríamos llegar a una situación en la que queramos agregar una funcionalidad más compleja en la transformación de datos. Por esta razón, Angular proporciona tuberías personalizadas. Las tuberías personalizadas se pueden usar para varios casos de uso, como formatear el número de teléfono, resaltar la palabra clave del resultado de la búsqueda, devolver el cuadrado de un número, etc. Para generar las tuberías personalizadas, podemos seguir 2 formas:

• Al crear un archivo separado para la tubería, tenemos que instalar y configurar manualmente la función de tubería con el archivo del componente y debemos importarlo al archivo del módulo.
• Al usar Angular CLI, establecerá todas las configuraciones necesarias en los archivos de componentes y módulos automáticamente.

Entenderemos ambos enfoques a través de ejemplos en una secuencia.

Método 1: sigamos los pasos para generar las tuberías personalizadas manualmente:

Paso 1: construya una clase que implemente la interfaz PipeTransform. Asegúrese de exportar la clase para que otros componentes puedan usarla para importar la tubería. Use UpperCamelCase para escribir el nombre de la clase de tubería. En este ejemplo, hemos llamado a la clase ArbitraryPipe . 

export class ArbitraryPipe implements PipeTransform {}

Paso 2: La interfaz PipeTransform tiene un método de transformación. En el método de transformación, escribimos código para transformar y devolver un valor. En este caso, queremos pasar el carácter que queremos reemplazar con espacios. El tipo de devolución del método también se define como una string porque estamos devolviendo la string transformada.

export class ArbitraryPipe implements PipeTransform {
  transform(value: string, character: string): string {
    return value.replace(character, ' ');
  }
}

Paso 3: Para hacer que la clase sea una tubería, agréguele un decorador de tuberías. Esta es una función, por lo que agregamos paréntesis como los otros decoradores. El nombre de la tubería se especifica en un objeto pasado a la función. El nombre de la tubería se utilizará en la plantilla.

@Pipe({
  name: 'arbitrary'
})
export class ArbitraryPipe implements PipeTransform {
  transform(value: string, character: string): string {
    return value.replace(character, ' ');
  }
}

Paso 4 : Importe pipe y pipeTransform desde @angular/core para que podamos usar el decorador de tuberías y la interfaz pipeTransform de esos módulos respectivamente. 

import { Pipe, PipeTransform } from '@angular/core';
  
@Pipe({
  name: 'arbitrary'
})
export class ArbitraryPipe implements PipeTransform {
  transform(value: string, character: string): string {
    return value.replace(character, ' ');
  }
}

Paso 5 : Ahora usemos nuestra canalización arbitraria en la plantilla del componente. Simplemente, agregue una tubería y el nombre de la tubería a una plantilla para usar la tubería arbitraria. Use dos puntos para separar cualquier argumento que requiera la transformación. El primer argumento del método de transformación es el valor a convertir, que en este caso es nuestro código de producto. Este es nuestro nombre de tubería. Los dos puntos denotan un parámetro de tubería, por lo tanto, nuestro guión se proporciona como el segundo argumento del método de transformación. Luego, el valor pasado se transforma según la lógica del método, y la string alterada se devuelve y se muestra.

<h2>Product code without using custom pipe is {{productCode}} </h2>
  
<h2>Product code using custom pipe is {{productCode | arbitrary:'-'}} </h2>

Paso 6 : En este caso, necesitamos importar ArbitraryPipe en el archivo del módulo, también agregar nuestra tubería arbitraria a la array de declaración de @NgModule en el archivo app.module.ts para declararlo en AppModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { ArbitraryPipe } from './arbitrary.pipe';
  
@NgModule({
  declarations: [AppComponent, ArbitraryPipe],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Nuestro archivo app.component.ts se ve a continuación:

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  productCode = '200-300';

Producción: 

Método 2: en este caso, usaremos Angular CLI para generar la tubería y Angular CLI se encargará de toda la configuración que hemos realizado en el primer método, es decir, importará automáticamente la tubería aleatoria y la incluirá en la declaración. array, configure también el archivo random.pipe.ts . Para generar la tubería, seguimos el siguiente comando: 

ng generate pipe random

Este comando generará un archivo llamado random.pipe.ts que contiene un código de muestra para implementar una canalización personalizada en el nivel raíz de la aplicación. También creará un archivo de especificaciones para escribir pruebas unitarias y modificará la referencia en app.module.ts.

import { Pipe, PipeTransform } from '@angular/core';
  
@Pipe({
  name: 'random'
})
export class RandomPipe implements PipeTransform {
  transform(value: string, character: string): string {
    return value.replace(character, ': ');
  }
}

Nuestro archivo app.component.ts se ve a continuación:

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'GeeksforGeeks -  a computer science portal for geeks ';
}

Podemos usar la declaración de tubería en la plantilla HTML.

<h4>Without using custom pipe: </h4>
<h2>{{name}}</h2>
<h4>With using custom pipe:</h4>
<h2>{{name | random: '-'}}</h2>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
  
import { AppComponent } from './app.component';
import { RandomPipe } from './random.pipe';
  
@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, RandomPipe],
  bootstrap: [AppComponent]
})
export class AppModule {}

Salida: después de ejecutar el comando ng serve , se mostrará la siguiente salida.