Paso a paso: Creación de tuberías personalizadas en Angular

Angular tuberías toman datos como entrada y los transforman en la salida deseada. Por ejemplo, mediante interpolación se muestra el nombre del producto. Ahora desea que el nombre del producto se muestre siempre en mayúsculas. Puede hacer esto usando Angular mayúsculas de tubería.

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `{{productName | uppercase}}`
})
export class AppComponent {
    productName = 'Cricket Bat';
}

En el componente anterior, productName se mostrará en mayúsculas. Por lo tanto, la tubería toma una entrada y la transforma en la salida deseada como se muestra a continuación:

Angular biblioteca nos proporciona muchas tuberías incorporadas como,

• UpperCasePipe
• LowerCasePipe
• CurrencyPipe (Tubería de moneda)
• PercentPipe
• DatePipe etc.

Veamos cómo podríamos usar la tubería de moneda incorporada.

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `{{productName | uppercase}} = {{productPrice | currency}}`
})
export class AppComponent {
    productName = 'Cricket Bat';
    productPrice = 990;
}

También puede pasar parámetros a una tubería mediante los dos puntos. Puede pasar la entrada a la tubería de moneda como se muestra a continuación:

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `{{productName | uppercase}} = {{productPrice | currency:'CAD':'symbol-narrow':'4.2-2'}}`
})
export class AppComponent {
    productName = 'Cricket Bat';
    productPrice = 990;
}

Aunque Angular proporciona muchas tuberías predeterminadas, puede haber requisitos al crear tuberías personalizadas. Crear una tubería personalizada es tan simple como crear una función.  Digamos que queremos crear una barra vertical, que pondrá en mayúscula la primera letra de cada palabra en una cadena.

Consider below component,

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
  <ul *ngFor='let n of names'>
   <li>{{n.name}}</li>
  </ul>
  `
})
export class AppComponent {
 
    names = [];
    constructor() {
        this.names = this.getNames();
    }
    getNames() {
        return [
            { 'name': 'dhananjay Kumar' },
            { 'name': 'jason beres' },
            { 'name': 'adam jafe' }
        ];
    }
}

Este componente imprimirá los nombres de la siguiente manera:

Ahora queremos poner en mayúscula la primera letra de cada palabra del nombre. Para hacer eso, necesitamos escribir una tubería personalizada.  Para crear una canalización, debe seguir estos pasos:

1. Create a class
2. Implementa PipeTransform en la clase
3. Implement transform function

Por lo tanto, puede crear una barra vertical para poner en mayúscula el primer carácter como se muestra en la lista a continuación:

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({ name: 'firstcharcateruppercase' })
export class FirstCharacterUpperCase implements PipeTransform {
    transform(value: string, args: string[]): any {
        if (!value) {
            return value;
        }
        return value.replace(/\w\S*/g, function (str) {
            return str.charAt(0).toUpperCase() + str.substr(1).toLowerCase();
        });
    }
}

Como puede ver, las tuberías personalizadas no son más que una función que toma parámetros de entrada y devuelve algún valor. Debe escribir toda la lógica de la tubería dentro del método de transformación.

Para usar la tubería firstcharacteruppermincase, primero debe declararla en el módulo, como se muestra a continuación:

import { FirstCharacterUpperCase } from './firstcharacteruppercase.pipe'
 
@NgModule({
    declarations: [
        AppComponent, FirstCharacterUpperCase
    ],

A continuación, en el componente, puede usarlo como se muestra a continuación:

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
  <ul *ngFor='let n of names'>
   <li>{{n.name | firstcharcateruppercase}}</li>
  </ul>
  `
})
export class AppComponent {
 
    names = [];
    constructor() {
        this.names = this.getNames();
    }
    getNames() {
        return [
            { 'name': 'dhananjay Kumar' },
            { 'name': 'jason beres' },
            { 'name': 'adam jafe' }
        ];
    }
}

Ahora obtendrá en la salida el primer carácter de cada nombre en mayúsculas.

To summarize:

1. Las tuberías personalizadas son de clase, que está decorada con @Pipe
2. Propiedad Name de @Pipe decorador define el nombre de la tubería
3. La clase de canalización debe implementar la interfaz PipeTransform

Debe implementar la lógica de negocios de canalización dentro del método de transformación.

Hay dos tipos de tuberías

1. Canalizaciones sin estado
2. Canalizaciones con estado

Lo que usamos y creamos anteriormente son tuberías sin estado. Son funciones puras, que toman una entrada y devuelven valores transformados.

Las canalizaciones con estado son complejas de implementar y recuerdan el estado de los datos que transforman. Por lo general, crean una solicitud HTTP, almacenan la respuesta y muestran la salida. Angular canalización asincrónica incorporada es un ejemplo de canalización con estado. En publicaciones posteriores, aprenderemos a crear tuberías con estado personalizadas.

Summary

En esta publicación, aprendimos sobre las tuberías en Angular. Las canalizaciones transforman los datos de entrada en la salida deseada. Angular proporciona muchas tuberías incorporadas; sin embargo, podría haber requisitos para escribir canalizaciones personalizadas. Hay dos tipos de tuberías: tuberías sin estado y tuberías con estado.

¿Te ha gustado este post?

¡Y ahí lo tienes! Si te gusta esta publicación, compártela. Además, si no ha revisado Infragistics Ignite UI for Angular componentes, ¡asegúrese de hacerlo! Tienen 30+ componentes de Angular basados en material para ayudarlo a codificar aplicaciones web rápidas más rápido.