Introducción a las directivas y tipos de directivas en Angular

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

2 comentarios

  1. WOW just what I was searching for. Came here by searching for your

  2. I am sure this piece of writing has touched all the internet viewers, its really really fastidious article on building up new website.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar