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.

1// Importamos los componentes necesarios
2import { Pipe, PipeTransform } from '@angular/core';
3 
4// Le ponemos un nombre a la tuberia
5@Pipe({name: 'multiplicador'})
6 
7// Definimos la clase implementado la interface PipeTransform
8export class MultiplicadorPipe implements PipeTransform {
9 
10  // La pipe recibirá el 2 parámetros 
11  transform(value: number, exponent: string): number {
12     
13    // Multiplicará los dos valores y los devolverá
14    let exp = parseFloat(exponent);
15    let mult = (value * exp);
16    return mult;
17 
18  }
19}

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

1import { Component } from '@angular/core';
2 
3// Importamos el pipe que hemos creado
4import { MultiplicadorPipe } from './pipes/multiplicador.pipe';
5 
6@Component({
7  selector: 'my-app',
8  template: `
9    <h1>Pipes personalizados en Angular 2</h1>
10<!--Usamos el pipe, multiplicará 7 por 23-->
11    Multiplicación: {{ 7 |  multiplicador:23}}
12  `,
13  directives: [ROUTER_DIRECTIVES],
14  pipes: [MultiplicadorPipe] // Le pasamos el pipe al componente
15})
16export class AppComponent { }