Funcionamiento y construcción de Filtros Personalizados de Pipes de Angular
En este post vamos a aprender cómo realizar transformaciones de datos desde los documentos HTML con las pipes. Angular proporciona una variedad de pipes incorporados, y también puedes crear tus propios pipes personalizados.
1, primero vamos a crear un fichero llamamos viaje.model.ts, es para instanciar objetos de la clase Viaje, representando viajes.
2, una datasource que carga y salva datos a un server crearemos un fichero llamamos datasource.model.ts
Dentro del proyecto hay una carpeta «assets»,aquí almaceno las imagenes.
3, Para mostrar la información de la tabla y el formulario, he creado un componente para la tabla y otro para el formulario, separados en dos carpetas
para ahorrar tiempo y reducir posibles errores, voy a crear en la interfaz de línea de comandos (CLI) de Angular
ng g c tablaviaje
ng gc formviaje
4, apreciaremos que se han añadido de forma automática el import del componente y su referencia etc añadiremos su funcionalidad como el boton y el texto.
5, luego cogeremos los selector de cada una y actualizaremos en el index.html
Para que el componente finalmente forme parte de la aplicacion hay que registrarlo en el root. app.module.ts
import { TablaviajeComponent} from …,import {FormviajeComponent}from…
declarations:[ TablaviajeComponent,FormviajeComponent]
bootstrap: [FormviajeComponent, TablaviajeComponent] es lo que arranca la aplicacion.
6,ahora ng serve, vamos a comprobarlo . sí ya están los dos aquí
7, Como quiero usar un servicio para obtener datos en lugar de un archivo datasource.ts, es posible que ya no necesito el archivo datasource.ts en este proyecto,
La manera de usar el servicio ya contaremos en otra ocasión.
8,Ahora os cuento la idea de mi aplicación, imaginemos que tengo una empresa de viajes, en mi pagina muestra una tabla de los planes de la empresa y un formulario para que el usuario meter su deseo en la lista.
9,Aquí como podéis ver en mi tabla en la columna, me falta la moneda.
10,podemos crear un pipes de currency para mostrar el symbol de la moneda. Entramos a la tabla de componente de html. Aquí donde muestra el precio, podemos introducir directamente el símbolo de barra, <td>{{ viaje.precio | currency:»EUR»:»symbol» }}</td> ya esta. Ahora echamos un vistazo en la la tabla ya tiene su símbolo.de tal manera también podemos añadir sus decimales.
11,
<td>{{ viaje.precio | currency:»EUR»:»symbol»:’true:3.2-2’ }}</td> true significa que deseo utilizar el símbolo de euro. Y 3.2-2 este formato se refiere con 3 digitos enteros y 2 deciamles .
12, Si ahora quiero mostrar los nombres de las ciudad en Mayúsculas, puedo directamente modificar aquí como antes, la balla y uppercase. Y esta, mira que fácil. <td>{{ viaje.nombreCiudad | uppercase }}</td> ya tenemos todas las ciudades en mayúsculas.
13,Con Pipes también podemos formatear una fecha, por ejemplo quiero añadir una fecha de inscripción. En la tabla de typescript, iniciamos un formato de la fecha, como dar fecha con una nueva instancia de tipo Date,… dateDar: Date = new Date(2023, 11, 20);
Y En el html de la tabla. Añadimos una cajita, de color amarillo padding2 y color blanco.
<div class=»bg-warning p-2 text-white»>
<div>Fecha de Inscripción: luego cogemos el nombre de la variable que acabamos de iniciar , añadimos el pipe , igualmente con la barra. En seguida tenemos la fecha. {{dateDar| date }}</div></div>
y aquí ponemos ‘date’ como la fecha.
14,
Vale, ahora vamos a ver algo difícil. Que siempre me ha costado salir. El pipe personalizado.
Primero echemos un vistazo a mi tabla abajo, que tengo una lista de select para seleccionar entre ciudades.
Por lo tanto necesitamos un pipe personalizado. Y para crearlo hay que crear un nuevo fichero de pipes para filtrar. Llamaremos ciudadFilter.pipe.ts
Igualmente para ahorrar tiempo y reducir posibles errores, voy a crear en la interfaz de línea de comandos (CLI) de Angular,
Importamos Pipe y PipeTransform de Angular core module. Y Viaje desde model
Aplicamos el decorador para Pipe @Pipe({ y nombramos “CiudadFilter”,
Pure:true, significa que el pipe es pura, que detecta cambios en las variables pero no a los cambios de array u objetos.
Iniciamos la variable de lo que vamos a filtrar, por ejemplo nombreCiudad:string | undefined; en tablaviaje.component.ts
luego volvemos a ciudadFilter.pipe.ts
Creamos una clase con que implemente la interfaz PipeTransform.
transform(viajes: Viaje[] | undefined, nombreCiudad: string | undefined): Viaje[] {
if (viajes === undefined) {
return [];
}
return nombreCiudad==undefined?
viajes : viajes.filter(p => p.nombreCiudad==nombreCiudad);
}
Dentro contiene un transform método, este método coge un array de viaje y un nombreciudad como parámetro. Cuando array viajes es undefined, retorna vacio, si nombreciudad es undefined, retorna el array viaje original. Si no , filtra el array devolviendo lo que ha filtrado coincidido.
Ahora registramos la clase de Pipe en el modulo central, app.module.ts
Declaration:[PacategoryFilterPipe]
Y FormsModule en import y imports para usar ngModel luego.
Ultimo paso: Aplicamos ciudadFilter en html. (ciudadFilter es el nombre de filter)
<tr *ngFor=»let viaje of viajes | ciudadFilter:nombreCiudad;
Y aquí select, utilizamos ngModel para rastrear la opción que selecciona por el usuario .ahora vamos a comprobar.
<select class=»form-control» [(ngModel)]=»nombreCiudad» >