Qué es pipe en angular 5

Digamos que pipe son funciones separadas a un componente, son funciones que te servirá en cualquier parte de la web.

Con angularjs existían algo como filtros y pipe es la evolución de esto.

Cuándo usar pipe en angular

pipe son pequeñas funciones que vamos a utilizar en 1 o varios componentes, para no programar varias veces la misma función, o crear un componente solo para esto una tarea, angular nos da la oportunidad de crear una componente “lite”.

Utilizaremos pipe en angular cuando son funciones fáciles y muy pequeñas, estas pueden ser colocadas en cualquier parte de nuestra web, por ejemplo

<!-- html -->
<p>Mi cumpleaño es el {{ birthday | date }}</p>

//component.ts
birthday = new Date(1988, 3, 15);

el resultado de esto seria : April 15, 1988.

Como podemos ver pipe en angular se activa usando ( | ) y el nombre del “filtro”, en este caso solo muestra la fecha pero podemos cambiar el formato por ejemplo.

<p> {{ birthday | date:"MM/dd/yy" }} </p>

el resultado seria:  03/15/98.

Tipo de pipes que usa angular

•  AsyncPipe
•  CurrencyPipe
•  DatePipe
•  DecimalPipe
•  DeprecatedCurrencyPipe
•  DeprecatedDatePipe
•  DeprecatedDecimalPipe
•  DeprecatedI18NPipesModule
•  DeprecatedPercentPipe
•  I18nPluralPipe
•  I18nSelectPipe
•  JsonPipe
•  LowerCasePipe
•  PercentPipe
•  SlicePipe
•  TitleCasePipe
•  UpperCasePipe

Como podemos ver tenemos varios pipe o filtros creados por el equipo de angular, pero en caso de que no tenga lo que necesitamos podemos crear el nuestro pipe.

Personalizar pipe en angular 5

Para este pipe vamos a usar ng For, que funcione con un numero que le demos, recordemos que ngFor solo usa array / objetos para hacer una iteración.

Angular Cli

ng g pipe forNumber

con esto vamos a crear y registrar nuestro pipe en nuestro module, nos creara una plantilla que vamos a modificar un poco para este ejemplo, en este caso vamos a capturar un valor y vamos a crear un array para que ngFor funcione bien

for-Number.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

//nombre que vamos a poner en el filtro, ejemplo: "{{ 5 | forNumber}}"
@Pipe({
  name: 'forNumber'
})
export class ForNumberPipe implements PipeTransform {
//valor es el numero que pasamos
  transform(valor: number): any {
    let x:number = 0;
    let ar: Array<number> = [];
    while(x < valor){
      ar.push(x+1);
      x++;
    }

    return ar;
  }

}

en nuestro html vamos a llamarlo de esta manera

<p *ngFor="let v of vuelta | forNumber ">vuelta {{v}} </p>

ts

export class AppComponent {
  
  vuelta = 20;
}

con esto podremos usar el ng for como un for normal, pipe puede ser tan complejo o tan fácil como uno lo desea, pero recordando que este “filtro” puede usarse en cualquier parte del html.

Recuerden que pueden encontrar todos nuestros tutoriales de angular aquí

El proyecto lo pueden encontrar aquí.