¿Te gustaría aprender Angular Desde Cero?
Tenemos los cursos que necesitas. ¡Haz clic aquí!
Las directivas (en inglés, directives), junto con los componentes, son una pieza clave para poder construir aplicaciones con Angular. Son, esencialmente, instrucciones para manipular el DOM. De hecho, los componentes son un tipo de directiva, ya que cuando usamos el selector de un componente, le estamos pidiendo a Angular que muestre dicho componente (y su lógica de programación) en algún lugar determinado del DOM.
Las Directivas extienden la funcionalidad del HTML usando para ello una nueva sintaxis. Con ella podemos usar lógica que será ejecutada en el DOM (Document Object Model).
Cada Directiva que usamos tiene un nombre, y determina donde puede ser usada, sea en un elemento, atributo, componente o clase.
Se dividen en tres tipos diferentes:
- Directivas de Atributo
- Directivas de estructurales
- Componentes
Tipos de Directivas
Directivas de Atributo
Alteran la apariencia o comportamiento de un elemento del DOM y son usados como atributos de los elementos.
Entre la directivas de atributo, encontramos:
- ngModel: Implementa binding
- ngClass: permite añadir/eliminar varias clases
- ngStyle: permite asignar estilos inline
Directivas Estructurales
Alteran la estructura del DOM, agregando, eliminando y manipulando los elementos host a los que están unidos. Algunas directivas estructurales tienen un asterisco (*), que precede al nombre del atributo de la directiva.
En las directivas estructurales podemos encontrar las siguientes:
- *ngIf: Nos permite incluir condicionales de lógica en nuestro código, como por ejemplo evaluar sentencias, hacer comparaciones, mostrar u ocultar secciones de código, y entre las muchas condiciones que deseemos crear, para que se renderice nuestro HTML, cumpliendo la sentencia a evaluar. Con el *ngIf, podemos evaluar sentencias con un simple If, podemos evaluar el else, para que no cumpliéndose la primera condición que se evalúa nuestro código ejecute otra acción en el caso contrario y podemos además incluir el then, para que cumpliendose la condición afirmativa (if), podamos añadir más flexibilidad a nuestro código incluyéndole un camino afirmativo adicional.
- *ngFor: Permite ejecutar bucles, los bucles son los que conocemos en lógica de programación como: for, while, foreach, etc. Con esta directiva estructural podemos evaluar de acuerdo a nuestra condición n veces.
- ngSwitch: esta directiva es similar al *ngIf, y es como el switch en lógica de programación. En esta directiva se pueden crear los diferentes casos que deseamos evaluar y cuando se cumple la condición esperada, oculta/muestra el HTML. Nos permite mantener nuestro código más limpio, si necesitamos evaluar varias sentencias.
Directivas de Componente
Las Directivas de Componente son directivas con un Template. Los componentes tienen decoradores “@Component”, el componente es un decorador @Directive que es extendido con características propias de los templates.
Te invitamos a ver todos los artículos que tenemos para ti, coméntanos que tal te pareció este articulo y compártelo con más personas.
¿Te gustaría aprender Angular Desde Cero?
Tenemos los cursos que necesitas. ¡Haz clic aquí!
