Directivas en Angular

Cuando hablamos de Front-end, Angular, React y Vue son nombres que generalmente se mencionan en lo que respecta al Desarrollo Web con Javascript. Entre ellos, Angular es el más antiguo y sigue siendo ampliamente utilizado en muchos proyectos y empresas debido a su escalabilidad y alta capacidad de componentización.

En este artículo, subiremos un peldaño más en nuestra escalada para aprender todos los conceptos básicos de Angular (ya dimos el primer paso, y si aún no lo has visto, haz clic aquí para ser dirigido al primer artículo), enfocándonos en explicar qué son las directivas y lo que algunas de ellas nos proporcionan.

¿Vamos?

¿Qué es Angular?

Angular es una plataforma de aplicaciones web lanzada en 2012, con el objetivo de facilitar el desarrollo con el lenguaje Javascript, sin que se requiera un nivel considerable de complejidad para construir páginas dinámicas en aplicaciones web.

Enfocado en la arquitectura Model-View-Controller (MVC), Angular divide una determinada aplicación en tres bloques principales:

• Model - Responsable de recibir las solicitudes y realizar su gestión (Angular);
• View - Exhibición de la información procesada (HTML);
• Controller - Interactúa con los comandos transmitidos y se relaciona directamente con la primera capa mencionada (Javascript).

Ya has notado que Angular cuenta con una estructura muy bien organizada y preestablecida para cada componente creado, ¿verdad? A continuación, programaremos juntos para crear el proyecto con el que practicaremos los conceptos de directivas.

Primeros pasos

Si aún no tienes Angular instalado en tu máquina, escribe el siguiente código en tu terminal:

npm install -g @angular/cli

Ahora que ya tenemos Angular debidamente habilitado para trabajar, utilizaremos el siguiente comando para crear un nuevo proyecto:

ng new diretivas-angular

NOTA - Usamos npm como herramienta de gestión de paquetes para la instalación y creación de proyectos, pero elige la que prefieras, ya que no interferirá en nuestro desarrollo, siempre y cuando esté instalada correctamente. Recuerda también que, en todo momento, es importante tener la documentación a la mano para resolver cualquier duda que pueda surgir.

Ejecuta el comando “npm start” en un terminal abierto en la raíz del proyecto creado para que se ejecute en tu navegador. Si todo salió bien con la creación del proyecto, se generará en tu terminal una URL que, al hacer clic en ella, te redirigirá a la siguiente página:

Una vez creada toda la estructura de nuestro proyecto, ¡sigamos adelante!

Directivas

Una directiva es una función que se ejecuta cada vez que Angular se compila. Se utilizan dentro de los elementos HTML, mejorando el dinamismo de nuestro código e implementando comportamientos que, de no existir, requerirían una mayor complejidad en el código. Hoy, comprenderemos dos directivas estructurales y dos de atributos.

Directivas estructurales

Las directivas estructurales cambian directamente la estructura del DOM. Entre las principales, se encuentran “NgIf” y “NgFor” que, como su nombre lo sugiere, desempeñan la misma función que una estructura condicional “if” y una estructura de repetición “for”, respectivamente.

Antes que nada, vamos a limpiar todo nuestro proyecto de datos innecesarios:

Ahora que todo está listo, es hora de crear un componente donde practicaremos la primera directiva: NgIf. En un terminal abierto en la carpeta raíz del proyecto, crearemos este componente con el siguiente comando:

ng generate component condition

Al ejecutar este código, notarás que, dentro del directorio app, se ha creado un nuevo directorio llamado “condition”. Todo lo que está en su interior forma el componente creado. Recuerda implementarlo en el componente principal App, pues, de lo contrario, no se renderizará:

Ahora, imaginemos que queremos hacer renderizaciones diferentes en la pantalla, según un determinado dato que estará almacenado en la clase del componente “Condition”. Este dato será un atributo del tipo string llamado “name” y, además, crearemos un atributo del tipo lista llamado “images”, que será una lista con dos direcciones de imágenes:

Necesitamos hacer una lógica con el uso de la directiva NgIf donde, si “name” está vacío, se renderizará la imagen correspondiente a la segunda posición del array. De lo contrario, renderizaremos la imagen referenciada en el primer ítem de la lista, junto con el valor de “name”. Para ello, crearemos dos elementos HTML: el primero será una div, que tendrá el nombre e imagen de un humano. El segundo será un elemento ng-template, que tendrá la imagen de un animal.

En el primer componente div, implementamos la propiedad “*ngIf”. El valor de esta propiedad es una string con dos condiciones separadas por punto y coma: la primera, si es verdadera, renderiza la div en cuestión; la segunda renderiza nuestro “ng-template”, si la condición es falsa:

NOTA - Si NgIf se utiliza solo para renderizar o no un determinado elemento, no es necesario usar el “else”. Basta con insertar la condición esperada como valor de la propiedad “*ngIf”:

De forma tan práctica como el “NgIf”, el “NgFor” permite que se renderice un elemento para cada ítem de una determinada lista. Para esto, crearemos un componente llamado “repetition” y, en su clase, una lista de objetos:

Aquí es donde ocurre la magia: En el archivo HTML, al igual que hicimos con la directiva NgIf, implementamos el NgFor. Su valor será una string con la estructura “let item of list”, donde “item” será el nombre que daremos a cada elemento dentro de la lista que se recorrerá y “list” es el nombre del atributo que posee esta lista de objetos. A partir de ahí, seguimos de la misma forma que al utilizar un bucle For:

Directivas de atributos

Mientras que las directivas estructurales manipulan directamente la estructura del DOM, las directivas de atributos manipulan la apariencia de los elementos del DOM. De esta manera, es posible alterar el estilo de los elementos. Como ejemplo de directivas de atributos, utilizaremos NgStyle y NgClass.

La directiva NgStyle permite alterar directamente un determinado atributo CSS de un elemento. A diferencia de las directivas estructurales que utilizamos en el tema anterior, esta directiva se implementa entre corchetes en lugar de usar el prefijo “*” antes de ella. Ve el siguiente ejemplo:

Nota que, para que sea un valor aceptado por la propiedad “ngStyle”, utilizamos una string con corchetes y un conjunto clave-valor, tal como lo haríamos al crear un objeto. Incluso, podrías preguntarte por qué utilizar esta directiva si simplemente sería más práctico aplicar una clase a esta div con todos estos atributos. La respuesta a tu cuestionamiento es que podemos asignar valores dinámicos a estos atributos CSS que se están detallando dentro de “NgStyle”:

De manera similar a cómo se implementa la directiva NgStyle, también seguimos para implementar NgClass. La diferencia es que el valor de esta directiva será el nombre de una clase preestablecida en el documento CSS del componente en cuestión:

NOTA - Es muy importante entender la importancia de hacer que determinados valores que se muestran o se utilizan para definiciones sean almacenados en la clase de un componente, en lugar de ser un valor fijo predefinido dentro del archivo HTML. Con el advenimiento de la creación de eventos (que aprenderemos en artículos posteriores), aprenderemos a manipular estos atributos, de forma que, de hecho, todo se vuelva dinámico y fácilmente alterable.

Consideraciones finales

En el artículo de hoy aprendimos qué son las directivas y conocimos algunas de las que ofrece Angular, divididas entre directivas estructurales y de atributos. Continuaremos en artículos posteriores trabajando con Angular, de manera que se aborden más conceptos fundamentales para la programación con este framework. Recuerda que existen varias directivas y que puedes aprender más sobre ellas consultando la documentación de Angular.

Si te pareció interesante este artículo, tienes alguna duda o simplemente quieres platicar sobre estos y otros temas, puedes contactarme a través del correo bruno.cabral.silva2018@gmail.com o en mi perfil de LinkedIn!

¡Te espero ansiosamente!