En este artículo, os vamos a presentaremos las directivas de Angular.

Cuando realizamos un desarrollo de una aplicación en Angular es muy habitual trabajar constantemente con directivas de Angular y ver que estás llegan hasta en puntos donde no nos lo esperaríamosdebido a que son fáciles de leer y sencillas y rápidas de añadir.

Las directivas, por tanto, son nuestras amigas y nos facilitaran mucho la vida. Por tanto:

I ❤️ directivas

¿Qué son las directivas de Angular?

Las directivas (o en inglés, directives) son una serie de elementos que aplicaremos a nuestro código HTML como si de un atributo se tratara con el fin de añadir una nueva funcionalidad a las etiquetas HTML.

Estás directivas, por tanto, le otorgan una nueva funcionalidad y un nuevo comportamiento a los elementos de nuestro template (páginas HTML).

Algunas de las funcionalidades que podemos añadir en función de la directiva que utilicemos nos permitirán entre otras cosas:

  • modificar la estructura del DOM: añadiendo, manipulando o eliminado directamente desde la vista HTML
  • modificar la apariencia general: modificar clases, o una propiedad en concreto, etc.

Hay que matizar que las directivas son simplemente instrucciones interpretadas por  el compilador (como @component, pero aplicadas sobre nuestras templates, y más concretamente sobre las etiquetas HTML) mediante a las cuales le indicamos a Angular que tiene que hacer en ciertos lugares de nuestro código.

Las directivas por tanto, junto a los componentes son elementos claves para renderizar (generar) nuestras vistas de nuestros templates HTML.

Tipos de directivas en Angular

¿Qué tipos de directivas existen?

Cada directiva que usamos tiene un nombre, y determina su funcionalidad y puede ser usada, sea en un elemento, atributo, componente o clase.

Las directivas se subdividen en:

– Directivas de tipo estructural: Cambian el DOM, y el elemento HTML al que se le apliquen. Y nos permiten analizar una condición y en función de si dicha condición es verdadera o falsa nos va a permitir mostrar / ocultar elementos del DOM.

Las directivas estructurales están formadas por:

      • *ngIf o [ngIf]: permite evaluar de forma condicional una condición y dependiendo del resultado normalmente se suele utilizar con la finalidad de mostrar u ocultar una información.
      • *ngFor o [ngFor]: permite iterar una array, objeto, etc. normalmente con el fin de insertar cada uno de los elementos contenidos en su interior.
      • *ngSwith o [*ngSwith] + *ngSwitchCase o [ngSwitchCase]: permite evaluar una expresión mediante a una sucesión de condiciones principalmente se utiliza cunado existen casuísticas múltiples y solo queremos ejecutar una en especifico o todas a partir de dicha condición.

El uso de la estructura *nombreDirectiva o [nombreDirectiva] dependerá en parte de la estructura que escribamos lo veremos más detalladamente en otro artículo cuando profundicemos en cada una de ellas.

– Directivas de tipo atributo: se aplican como atributos a los elementos HTML. Modifican el DOM pero sin ser capaces de crear y destruir el elemento HTML sobre el que se aplican. Las directivas de tipo atributo están formadas por:

      • [ngStyle]: nos permitirán cambiar las propiedades del elemento HTML seleccionado.
      • [ngClass]: nos permitirán agregar clases dinámicamente sobre el elemento HTML seleccionado.

– Directivas de componentes: una clase sin nada más para Angular es una clase sin más. Si la combinamos con un decorador es cuando obtiene el protagonimo suficiente para por ejemplo ser un componente (gracias al decorador @Component) o un modulo (gracias al decorador @NgModule).

Las directivas de componentes se subdividen en:

      • Directivas de Angular (Angular Directives): @Component, @Module, etc.
      • Directivas customizadas (Custom Directives): creadas por los desarrolladores mediante a la instrucción: ng g directives [nameofdirective]

Esto es todo por hoy, espero que os haya servido para empezar a interiorizar un poco que son las directivas en esta «vista de pajaro» que hemos realizado donde principalmente nos hemos enfocado en la parte más teoría de las directivas. En las próximas lecciones nos enfocaremos en en la parte práctica y analizaremos una a una cada una de ellas. Un saludo