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.