Pipes personalizados en Angular 2

Publicado en Ago 20, 2016

En el tutorial anterior vimos como utilizar los pipes por defecto en Angular 2 y ya sabemos que son filtros o funciones que nos permiten manipular en las vistas ciertos datos.

Hoy vamos a ver como crear pipes personalizados en Angular 2 de forma sencilla.

Lo primero que haremos será crear un directorio llamado pipes dentro del directorio app de nuestro proyecto Angular y en este directorio podemos crear un fichero que se llame multiplicador.pipe.ts, que será el fichero que llevará la clase etc de nuestro filtro personalizado.

// Importamos los componentes necesarios
import { Pipe, PipeTransform } from '@angular/core';

// Le ponemos un nombre a la tuberia
@Pipe({name: 'multiplicador'})

// Definimos la clase implementado la interface PipeTransform
export class MultiplicadorPipe implements PipeTransform {

  // La pipe recibirá el 2 parámetros 
  transform(value: number, exponent: string): number {
    
    // Multiplicará los dos valores y los devolverá
    let exp = parseFloat(exponent);
    let mult = (value * exp);
    return mult;

  }
}

Ya tenemos nuestra pipe definida, ahora solo tenemos que usarla en nuestro componente. Usaremos por ejemplo el componente app.component.ts

import { Component } from '@angular/core';

// Importamos el pipe que hemos creado
import { MultiplicadorPipe } from './pipes/multiplicador.pipe';

@Component({
  selector: 'my-app',
  template: `
    <h1>Pipes personalizados en Angular 2</h1>
<!--Usamos el pipe, multiplicará 7 por 23-->
    Multiplicación: {{ 7 |  multiplicador:23}}
  `,
  directives: [ROUTER_DIRECTIVES],
  pipes: [MultiplicadorPipe] // Le pasamos el pipe al componente
})
export class AppComponent { }

Pues con esto ya sabemos crear nuevos pipes personalizados en Angular 2.