Angular 2 - Tubos personalizados
Angular 2 también tiene la posibilidad de crear tuberías personalizadas. La forma general de definir una tubería personalizada es la siguiente.
import { Pipe, PipeTransform } from '@angular/core';  
@Pipe({name: 'Pipename'}) 
export class Pipeclass implements PipeTransform { 
   transform(parameters): returntype { } 
}Dónde,
- 'Pipename' - Este es el nombre de la tubería. 
- Pipeclass - Este es el nombre de la clase asignada a la tubería personalizada. 
- Transform - Esta es la función para trabajar con la tubería. 
- Parameters - Estos son los parámetros que se pasan a la tubería. 
- Returntype - Este es el tipo de retorno de la tubería. 
Creemos una tubería personalizada que multiplique 2 números. Luego usaremos esa tubería en nuestra clase de componente.
Step 1 - Primero, cree un archivo llamado multiplicador.pipe.ts.
 
                Step 2 - Coloque el siguiente código en el archivo creado anteriormente.
import { 
   Pipe, 
   PipeTransform 
} from '@angular/core';  
@Pipe ({ 
   name: 'Multiplier' 
}) 
export class MultiplierPipe implements PipeTransform { 
   transform(value: number, multiply: string): number { 
      let mul = parseFloat(multiply); 
      return mul * value 
   } 
}Se deben tener en cuenta los siguientes puntos sobre el código anterior.
- Primero estamos importando los módulos Pipe y PipeTransform. 
- Luego, estamos creando una tubería con el nombre 'Multiplicador'. 
- Creando una clase llamada MultiplierPipe que implementa el módulo PipeTransform. 
- La función de transformación tomará el valor y el parámetro múltiple y generará la multiplicación de ambos números. 
Step 3 - En el archivo app.component.ts, coloque el siguiente código.
import { 
   Component 
} from '@angular/core';  
@Component ({ 
   selector: 'my-app', 
   template: '<p>Multiplier: {{2 | Multiplier: 10}}</p>' 
}) 
export class AppComponent {  }Note - En nuestra plantilla, usamos nuestra nueva tubería personalizada.
Step 4 - Asegúrese de que el siguiente código esté colocado en el archivo app.module.ts.
import {
   NgModule
} from '@angular/core';
import {
   BrowserModule
} from '@angular/platform-browser';
import {
   AppComponent
} from './app.component';
import {
   MultiplierPipe
} from './multiplier.pipe'
@NgModule ({
   imports: [BrowserModule],
   declarations: [AppComponent, MultiplierPipe],
   bootstrap: [AppComponent]
})
export class AppModule {}Se deben tener en cuenta las siguientes cosas sobre el código anterior.
- Necesitamos asegurarnos de incluir nuestro módulo MultiplierPipe. 
- También debemos asegurarnos de que esté incluido en la sección de declaraciones. 
Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.
