11 - Pipes

Los pipes en Angular sirven para ejecutar funcionalidades sobre nuestra vista.

¿Qué quiero decir con esto?

Angular tiene una serie de pipes que ya estan estan definidos por ejemplo :

UPPERCASE, LOWERCASE, CURRENCY, DATE , entre otros...

Con los nombres simplemente te daras cuenta que pueden modificar una variable para que este en mayuscula, minuscula, poner el tipo de moneda, etc ...

Ahora es muy interesante el manejo del mismo... porque nos solo nos hace obviar funciones para manejar los datos, si no que tambien nos deja crear nuestros propios pipes para nuestro proyecto, pero primero vamos a ver como funcionan los base:

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

@Component({
    selector: 'pipe-cmp',
    template:`
        Date : {{ cumpleanios | date }} </br>
        nombre: {{ nombre | uppercase }} </br>
        moneda: {{ diez | currency }}
    `
})
export class OtroCmp{
      cumpleanios  = new Date(1989, 1, 13);
      nombre = 'Jorge Cano';
      diez = 10;
}

La variable cumpleanios realmente se ve asi => Mon Feb 13 1989 00:00:00 GMT-0200 (-02), pero con el manejo de date se pasa directo al location que tiene y pone la fecha tal y como deberia verse!

Así mismo con el nombre, lo pone completo en mayuscula y el numero 10 al agregarle al currency le puso los dolares directo, mas alla de eso podemos indicarle el currency que queramos.

Pero no tiene sentido si fuera esto solo, porque podria hacerlo en cualquier lado... ahora lo importante es que nostros podemos hacer nuestros propios PIPES.

Vamos a crear nuestro propio pipe!

@Component({
  selector: 'my-app',
  template: `
    <h2>Conversor</h2>
    <div>Cantidad: <input [(ngModel)]="cantidad" /></div>
    <div>1 dolar es : <input [(ngModel)]="factor" /></div>
    <p>
      Oh: {{cantidad | conversorPipe: factor}}
    </p>
  `,
})
export class App {

}


@Pipe({name: 'conversorPipe'})
export class ConversorPipe implements PipeTransform {
  transform(value: number, exponent: string): number {
    let exp = parseFloat(exponent);
    return value * (isNaN(exp) ? 1 : exp);
  }
}

Nuestro PIPE es un conversor, lo que hace es tomar la cantidad y el factor, para poder hacer la multiplicación.

Entonces, recibe cantidad como value y como el valor del pipe lo que esta despues con los dos puntos, o sea el factor, claro que hacer una simple multiplicación capaz que no tenga mucho sentido.. pero si tenemos calculos mas complejos o funcionalidad mas generica que tenemos que repetir varias veces, por lo tanto dependiendo de lo que hacemos nos va a servir para que los pipes hagan funcionalidades.