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.