Última actualización: 28 julio, 2022TEN EN CUENTA QUE...
En este artículo vamos a introducir un pilar básico de Angular: las directivas. Si acabas de aterrizar aquí y estos temas te suenan a chino, te recomiendo que eches un vistazo a esta introducción a Angular antes.
¿Qué son las directivas?
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.
Por esta razón, podemos afirmar que los componentes son directives, pero con una template, es decir, con un archivo HTML detrás. Existen otras directivas sin template, como cualquier directive personalizada que podamos crear nosotros mismos (en inglés, custom directive).
Un ejemplo de custom directive podría ser una directive que le diese a un párrafo un color azul de fondo. Su sintaxis sería así:
Lo más común es añadir directivas como en el ejemplo de arriba, mediante atributos HTML, aunque no es la única manera. También podríamos añadirlas mediante una etiqueta HTML o una clase de CSS.
Para configurar nuestra directive, necesitaríamos crear un archivo TypeScript (en adelante, TS) y definirla ahí, donde añadiríamos la lógica de programación para añadir un fondo azul a un elemento:
@Directive({
selector: '[appTurnBlue]'
})
export class TurnBlueDirective {
// business logic here
// ...
}
En otro artículo de nivel más avanzado aprenderemos a crear nuestras propias directives (custom directives). Por ahora, es fundamental saber que Angular trae por defecto unas cuantas directives muy útiles (en inglés, built-in directives). Las podemos reconocer, entre otras cosas, por su prefijo "ng". ¡Vamos a verlas!
Ejemplo para nuestra demo
Para poder entender las diferentes directives que trae Angular, vamos a crearnos un ejemplo sobre el que poder trabajar. Partiremos del mismo ejemplo que usé en el artículo sobre databinding, así que es vital que entiendas los conceptos básicos del databinding. Si ya los entiendes, puedes ir a esta sección de ese artículo y seguir los pasos para construir nuestra demo.
Después, vuelve aquí y prepárate para aprender sobre built-in directives. 
Tipos de directivas
Aprendí sobre tipos de directivas y sobre otros temas de Angular en profundidad en este completo curso de Angular.
CONTENIDO RESTRINGIDO
El resto del contenido es sólo para miembros del Club ACTech. Puedes unirte aquí o iniciar sesión si ya eres miembro.
THE END!
¡Y con esto terminamos esta guía de iniciación a las directivas de Angular! Espero que hayas aprendido algo nuevo 
. Si te queda alguna duda, ¡nos vemos en los comentarios!
Más recursos de aprendizaje
En mi experiencia, la manera más eficaz para aprender Angular es combinando varias vías de aprendizaje. Uno de mis métodos favoritos son los vídeo-cursos y mi plataforma predilecta para eso es Udemy. He hecho varios cursos pero sólo recomiendo aquellos que verdaderamente me han sido útiles. Aquí van:
Si necesitas apoyo en forma de libro, puede que éstos te sirvan de ayuda:
La programación es un mundo que evoluciona a una velocidad de vértigo. Los autores de estos libros lo saben, por eso suelen encargarse de actualizar su contenido regularmente. Asegúrate de que así sea antes de adquirirlos 
.
Participo en el programa de afiliados de Udemy y Amazon, lo que significa que, si compras alguno de estos cursos y/o libros, yo me llevaré una pequeña comisión y a ti no costará nada extra. Vamos, lo que se dice un win-win .
Sobre la autora de este post
Soy Rocío, una abogada reconvertida en programadora. Soy una apasionada de aprender cosas nuevas y ferviente defensora de que la única manera de ser feliz es alcanzando un equilibrio entre lo que te encanta hacer y lo que te saque de pobre. Mi historia completa, aquí.
Otros artículos que pueden interesarte