Directivas en Angular

En Angular tenemos tres tipos de directivas:

Componentes: directivas con una plantilla.
Directivas estructurales: Qué cambian el diseño del DOM agregando y eliminando elementos del DOM.
Directivas de atributos: Cambian la apariencia o el comportamiento de un elemento, componente u otra directiva.

Las directivas estructurales, cambian la estructura de la vista.
Dos ejemplos son NgFor y NgIf.

Las directivas de atributos se utilizan como atributos de elementos.

Los componentes son los más comunes de estas tres directivas.

Creando nuestras propias directivas de atributos.

Una directiva de atributos requiere, como mínimo, la construcción de una clase de controlador anotación con @Directive, que especifica el selector que identifica el atributo.

La clase de controlador implementa el comportamiento directiva deseada.

Las directivas deben ser declaradas en app.module, de la misma manera que hacemos con los componentes.

Generando directiva:
ng generate directive directives/myHover

Con este comando, generamos una custom directive (en este caso, en una carpeta llamada directives).

import { Directive } from '@angular/core';
Importamos Directive, proporcionada por el decorator @Directive.

@Directive({ selector: '[appResaltar]' })

Tan solo tenemos una propiedad de configuración en el decorator, que es el selector de atributos.
[appResaltar]

Con los corchetes, hacen que este sea un selector de atributos.

Angular, buscará los elementos que contengan este atributo, en este caso: appResaltar.

y le aplicará la lógica de dicha directiva.

Le podemos asignar este atributo, a cualquier elemento html.

Quiero destacar, el prefijo app, en nuestro atributo.
Es una buena práctica, es prefijar los nombres del selector para asegurarse de que no entren en conflicto con los atributos HTML estándar.
Y esto reduce el riesgo de conflictos con nombres de directivas de terceros.

También es muy importante, no utilizar el prefijo ng en nuestras custom directives, ya que ng es el prefijo que está reservado para Angular y su uso podría causar errores que son difíciles de diagnosticar.