Vamos a crearnos un Pipe que capitalice una cadena de texto, es decir, que la primera letra la pase a mayúscula y el resto la pase a minúsculas. Es más vamos a incluirle un parámetro booleano (verdadero o falso) para distinguir si queremos capitalizar sólo la primera letra de toda la frase, o si queremos capitalizar la primera letra de cada palabra de la frase.
Aunque los Pipes se pueden crear por consola con el Ancular CLI como el resto de componentes, vamos a crearlo esta vez de forma manual.
Primero nos creamos una carpeta "pipes" dentro de "app", y luego un fichero "capitalizado.pipe.ts" dentro de la misma:
El fichero "capitalizado.pipe.ts" lo informamos con lo siguiente:
Como podemos ver, no es más que una clase con la función "transform", que es la que se lanza al ejecutar el Pipe. Esta función tiene el parámetro "value", que es la variable sobre la que ejecutamos el Pipe, y otra booleana, que es la primera variable opcional que le podemos pasar al Pipe. Esta variable la inicializamos a verdadero en el constructor para que tenga el valor "true" por defecto, es decir, si no se la pasamos al ejecutar el Pipe.
La función lo único que hace es capitalizar la primera palabra o todas según el parámetro booleano.
Ahora tenemos que declarar el Pipe en el fichero "app.module.ts", como cualquier otro componente:
Con esto sería todo, ya sólo falta declarar una variable string en el TypeScript para utilizar nuestro Pipe:
Y utilizamos la variable y el Pipe en nuestro html. Hacemos la prueba con y sin parámetro booleano para probar los resultados:
Y aquí está el resultado:
Esto sería todo.
Como nota adicional, para crear un Pipe mediante comandos del Angular CLI, un ejemplo sería así:
"ng g p pipes/capitalizacion".
No hay comentarios:
Publicar un comentario