Añadiendo estilos con Directivas
AngularDex (II)
Nuestro objetivo en esta ocasión es desarrollar un elemento reutilizable que nos permita de una manera sencilla estilizar una etiqueta HTML en base a un tipo de Pokémon, es decir, si el tipo del pokemon es Planta se debería mostrar el elemento con un fondo de color verde y con el texto en blanco, mientras que si es Fuego que se muestre en color Rojo.
Para ello lo primero será crear la directiva:
ng g d directives/pokemon-type/pokemon-typeProtip: el CLI de Angular nos permite pasar como un argumento la ruta del elemento, en este caso creará la carpetas directives y pokemon-type y dentro de esta se guardarán los archivos de nuestra directiva (el spec y el ts)
Ahora si recordamos la clase anterior Creación de Directivas Personalizadas en Angular para Manipular el DOM, vimos los distintos decoradores que puede tener una directiva, en este caso nos interesa @Input para conocer el tipo del pokemon y @HostBinding para enlazar los estilos del elementos (background-color, color y padding)
También necesaremos un listado con los diferentes colores de cada uno de los Tipos, para ello yo he utilizado un HashMap (un JSON o Diccionario, no son exactamente lo mismo, pero para que nos entendamos) donde la Key es el tipo del Pokémon y el Valor el código hexadecimal del color, de esta manera nos ahorraríamos crear un if/switch con 100 condiciones. Tienes el código completo en el repositorio con este HashMap.
¡Recuerda nombrar tu input “principal” con el mismo nombre de la directiva!
La utilización de nuestra directiva sería la siguiente:
Et voila! Así de sencillo hemos creado nuestra primera directa, la cual recibe como argumento un tipo de pokémon y automáticamente añade los estilos que hemos establecido ¡Buen trabajo!
¡Te reto a probar nuestra directiva con tus Pokémon favoritos! Te dejo los míos:
En este artículo hemos aprendido a implementar una directiva personalizada que nos permite manipular un elemento HTML, en este caso hemos utilizado las anotaciones Input para recibir el tipo de Pokémon y en base a este con HostBinding hemos podido modificar el background-color.