Implementando Pipes en nuestra Aplicación
AngularDex (III)
Como hemos visto en la clase ¿Qué es una Pipe y Cómo usar las Pipes integradas en Angular?, una pipe es una función que se utiliza para transformar y formatear datos en la plantilla HTML de manera sencilla. En nuestra aplicación nos interesa asegurarnos que el nombre del Pokémon siempre sea en TitleCase, además, seguro que lo habéis notado, el tipo de los Pokémon está en inglés por lo que tendremos que desarrollar alguna manera de traducir este texto, y por último también queremos que el número de los Pokémon se muestre siempre con la máscara XXXX, por ejemplo 0001, 0448.
“Pero Rodri ¿no sería más fácil simplemente indicar el tipo de los Pokémon en Español?” Efectivamente, nosotros ahora mismo tenemos control absoluto por lo que cambiar el valor de la propiedad no sería un problema, pero eventualmente nos conectaremos a la PokéAPI la cual devuelve estos valores en inglés.
Con lo aprendido en clases anteriores deberías se capaz de implementar la pipe TitleCase (titlecase) para las propiedades Nombre y Tipo del Pokémon ¡Te reto a intentarlo!
Para los dos puntos siguientes vamos a partir de la base explicada en la clase Creación de pipes para transformar datos, así que vamos manos a la obra:
Como siempre, vamos a empezar creando el elemento:
ng g p pipes/pad-startA fortunadamente, desde la aparición de ES2017 contamos con la función nativa padStart, el cual recibe como argumento la longitud máxima del string y el caracter que se usará para rellenarlo en caso que la longitud del string sea menor al máximo. Por lo que simplemente tendríamos que invocar este método desde nuestra Pipe:
Protip: recuerda que en TypeScript también puedes establecer parámetros con valores por defecto, como es el caso de “character”.
Y lo utilizamos como cualquier otra pipe:
Recuerda que padStart recibe dos parámetros, uno para la longitud máxima y otro para el caracter que se utiliza para rellenar el espacio, en caso que quieras que en lugar de mostrarse 0 se muestr * tendrías que indicador, por ejemplo: “ valor | padStart:4:’*’ ”.
Este sería el resultado:
Una cosa menos, ahora debemos traducir el tipo de Pokémon y para ello vamos a utilizar un Map/Diccionario el cual tendrá como clave el nombre en inglés y como valor el nombre en español.
Como siempre, creamos nuestro pipe con la CLI:
ng g p pipes/translate-typeAhora simplemente debemos crear nuestro Map con las traducciones correspondientes (recuerda que tienes el Map completo en el respositorio del proyecto)
Y para utilizarlo:
Et voila!
En este artículo hemos aprendido a utilizar las pipes integradas en Angular, además, hemos creado un par ellas para que se ajusten a la necesidades de nuestra aplicación. ¡Con esto estás preparado para implementar tus propias pipes!