Los Pipes son una forma de dar formato específico a los datos que mostramos en pantalla. Por ejemplo, podemos tener una variable llamada "Fernando", y queremos que, al mostrarla por la pantalla, aparezca como "FERNANDO", con todas las letras en mayúscula, PERO SIN AFECTAR AL VALOR DE LA VARIABLE, es decir, que el cambio sea sólo visual y que la variable dentro del programa siga teniendo el valor "Fernando". Para eso sirven los Pipes.
El uso más común de los Pipes es dar formato a las fechas (objetos de tipo Date) y que se muestren de una forma u otra según nuestras necesidades.
Vamos a ver el código de un programa sencillo en el que incluimos muchos de los pipes predefinidos por Angular y su resultado.
Se trata simplemente de una tabla de 3 columnas en la que mostramos el valor de una variable, el Pipe que le aplicamos, y el resultado de éste sobre la variable. Sólo tenemos que modificar el código html (para mostrar los datos) y el TypeScript (para crear las variables que utilizará el html) del componente inicial de la aplicación como sigue:
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
nombre:string = "Fernando";
arreglo:number[] = [1,2,3,4,5,6,7,8,9,10];
PI:number = Math.PI;
a:number = 0.234;
salario:number = 1234.5;
heroe = {
nombre: "Logan",
clave: "Worverine",
edad: 500,
direccion: {
calle: "Primera",
casa: "19"
}
}
valorDePromesa = new Promise( (resolve, reject) => {
setTimeout( () => resolve('LLego la data!'), 3500 );
} );
fecha:Date = new Date();
}
app.component.html
<div class="container">
<br>
<h1>Pipes</h1>
<hr>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Variable</th>
<th scope="col">Pipe</th>
<th scope="col">Producto</th>
</tr>
</thead>
<tbody>
<tr>
<td> {{ nombre }} </td>
<td> uppercase </td>
<td> {{ nombre | uppercase }} </td>
</tr>
<tr>
<td> {{ nombre }} </td>
<td> lowercase </td>
<td> {{ nombre | lowercase }} </td>
</tr>
<tr>
<td> {{ nombre }} </td>
<td> slice:3 </td>
<td> {{ nombre | slice:3 }} </td>
</tr>
<tr>
<td> {{ nombre }} </td>
<td> slice:0:3 </td>
<td> {{ nombre | slice:0:3 }} </td>
</tr>
<tr>
<td> {{ arreglo }} </td>
<td> slice:1:5 </td>
<td> {{ arreglo | slice:1:5 }} </td>
</tr>
<tr>
<td> {{ PI }} </td>
<td> number </td>
<td> {{ PI | number }} </td>
</tr>
<tr>
<td> {{ PI }} </td>
<td> number:'1.0-2' </td>
<td> {{ PI | number:'1.0-2' }} </td>
</tr>
<tr>
<td> {{ a }} </td>
<td> percent </td>
<td> {{ a | percent }} </td>
</tr>
<tr>
<td> {{ a }} </td>
<td> percent:'2.2-2' </td>
<td> {{ a | percent:'2.2-2' }} </td>
</tr>
<tr>
<td> {{ salario }} </td>
<td> currency </td>
<td> {{ salario | currency }} </td>
</tr>
<tr>
<td> {{ salario }} </td>
<td> currency:'EUR' </td>
<td> {{ salario | currency:'EUR' }} </td>
</tr>
<tr>
<td> {{ salario }} </td>
<td> currency:'EUR':false </td>
<td> {{ salario | currency:'EUR':false }} </td>
</tr>
<tr>
<td> {{ salario }} </td>
<td> currency:'EUR':true:'4.0-0' </td>
<td> {{ salario | currency:'EUR':true:'4.0-0' }} </td>
</tr>
<tr>
<td> {{ salario }} </td>
<td> number:'.2-2' </td>
<td> {{ salario | number:'.2-2' }} </td>
</tr>
<tr>
<td> {{ valorDePromesa }} </td>
<td> async </td>
<td> {{ valorDePromesa | async }} </td>
</tr>
<tr>
<td> {{ fecha }} </td>
<td> date </td>
<td> {{ fecha | date }} </td>
</tr>
<tr>
<td> {{ fecha }} </td>
<td> date:'medium' </td>
<td> {{ fecha | date:'medium' }} </td>
</tr>
<tr>
<td> {{ fecha }} </td>
<td> date:'MMMM - dd' </td>
<td> {{ fecha | date:'MMMM - dd' }} </td>
</tr>
</tbody>
</table>
<h4>Slice</h4>
<ul>
<li *ngFor="let item of arreglo | slice:5:20"> {{ item }} </li>
</ul>
<h4>JSON</h4>
<pre> {{ heroe | json }} </pre>
</div>
Si levantamos la aplicación, obtenemos como resultado la siguiente tabla, en la que se ve claramente el efecto de cada Pipe sobre cada variable:
Y eso es todo. Hay más Pipes que se pueden obtener de la documentación oficial de Angular.
No hay comentarios:
Publicar un comentario