¿Qué son las directivas en Angular?

Las directivas son uno de los conceptos más importantes en Angular, En esta sección, veremos qué es una directiva y sus tipos y cómo crear nuestras propias directivas.

¿Qué se entiende por directivas en Angular?

Las directivas son clases que añaden un nuevo comportamiento o modifican el existente a los elementos de la plantilla.

Básicamente las directivas se utilizan para manipular el DOM, por ejemplo añadiendo/quitando el elemento del DOM o cambiando la apariencia de los elementos del DOM.

Tipos de directivas

• Directiva de componentes
• Directiva estructural
• Directiva de atributos

Directiva de componentes

Los componentes son directivas especiales en Angular. Son la directiva con una plantilla.

Puede que te confunda un poco, pero si ves la definición de la directiva, dice que las directivas se utilizan para manipular el DOM, así que ahora si piensas lo que hace component, en realidad está mostrando algo en el DOM, de ahí que podamos decir que component es también una directiva con una plantilla (template o templateUrls).

Si tu quieres saber acerca de este tema en una buena platica te dejo el siguiente video

Directiva estructural

Las directivas estructurales se utilizan para cambiar el diseño del DOM añadiendo y eliminando elementos del DOM. Básicamente cambian la estructura del DOM
Ejemplos de directivas estructurales son ngIf, ngFor, ngSwitch.

• *.ngIf - añade o elimina elementos del DOM.
• *.ngFor - muestra una lista de elementos en cada iteración.

Todas las directivas estructurales están precedidas por el símbolo Asterix (*).

Directiva de atributos

Las directivas de atributos se utilizan para cambiar la apariencia o el comportamiento de un elemento.

Algunos ejemplos de directivas de atributos son ngStyle, ngClass, ngModel

• ngStyle - se utiliza para aplicar estilos que cambiarán la apariencia.
• ngClass - se utiliza para aplicar clases CSS que cambien la apariencia.

Crear nuestra propia directiva de atributos

Sigue los siguientes pasos para crear tu propia directiva Attribute que cambia el color del texto cuando pasamos el ratón por encima.

Crear una directiva personalizada es igual que crear un componente de Angular. Para crear una directiva personalizada tenemos que reemplazar @Component con @Directive

1. Crea una clase y añade @Directive y pasale el objeto que tiene la propiedad selector (nombre de la directiva)
2. Para crear una directiva de atributos necesitamos acceder al elemento HTML sobre el que se aplica la directiva, para ello inyectaremos la dependencia ElementRef  usando el constructor en nuestra clase
3. Ahora tenemos que escuchar el evento hover del elemento, para ello podemos utilizar HostListener. HostListener escucha el evento DOM en el elemento anfitrión. También proporciona un método manejador que se ejecuta cuando ocurre ese evento.
   Aquí el elemento anfitrión es el elemento donde estamos aplicando nuestra directiva.
4. En el método handler, accede a la referencia del elemento y cambia el color del texto.

import { Directive, ElementRef, HostListener } from '@angular/core'; 
@Directive ({
    selector: '[highlight]',
})
export class highlightDirective {
    constructor(private eleRef) {}
    @HostListener ('mouseover') onMouseover () {
        this.eleRef.nativeElement.style.color = 'red'; 
    }
    @HostListener ('mouseleave') onMouseLeave () {
        this.eleRef.nativeElement.style.color = 'black';
    }
}

Pasar información a las directivas

En nuestro ejemplo anterior, estamos codificando el valor del color como rojo, pero hay una manera de pasar el nombre del color como entrada para la directiva

Forma 1:

Añade @ Input() en la clase directiva con el mismo nombre que la directiva (@Input() highlight; ) y pasar el valor así <p highlight=”blue”>Highlight Directive</p>

Forma 2:

Añade @ Input() en la clase directiva con cualquier nombre de variable  ( @Input() colorName;) y pasar el valor así  <p highlight=”blue” colorName=”green”>Highlight Directive</p>

Crear nuestra propia directiva Structural

Sigue los siguientes pasos para crear nuestra propia directiva Structural que añade o elimina el contenido en función del valor proporcionado (similar a *ngIf)

1. Crea una clase y añade @Directive y pasale el objeto que tiene la propiedad selector (nombre de la directiva)
2. En el caso de la directiva estructural, necesitamos dos cosas ViewContainerRef y TemplateRef

ViewContainerRef Contiene la referencia al elemento anfitrión, que aloja el componente (o directiva).

TemplateRef Contiene la referencia de la plantilla definida por ng-template
Inyecta estas dos dependencias en el constructor de nuestra clase directiva.

3.  Crea una @ Input() con un nombre de variable similar al nombre de la directiva indica si se debe añadir o eliminar el contenido.

4. Ahora tenemos que mostrar el contenido cuando el valor es verdadero y eliminarlo cuando el valor es falso, para ello creamos un método hook del ciclo de vida ngOnChanges()

5.  En ngOnChanges, comprueba el valor, si es true añade el templateRef en containerRef si es falso borra todo de containerRef

ngOnChanges() {
  if (this.toggle) {
     this.viewRef.createEmbeddedView(this.tempRef);
  } else {
     this.viewRef.clear();
  }
}

Utilizar la directiva así en nuestra plantilla de componentes

<div *toggle="true">  
  <p>Some text</p>  
</div>

Eso es todo acerca de las directivas en Angular, he explicado sólo lo básico, tu puedes entender más profundamente mediante la lectura de los documentos oficiales.

Fuente

Fuente

Documentación