Las directivas

1. Introducción

Una directiva es un elemento del framework que va a interactuar directamente con el DOM de nuestra página HTML. Por lo tanto, permiten asociar a un elemento HTML un comportamiento JavaScript. Hay tres tipos de directivas.

En primer lugar, las directivas de atributo. Estas no modifican la arborescencia del DOM. Dicho de otra manera, no van ni a crear ni a eliminar elementos HTML, sino que van a interactuar con los atributos y propiedades de las etiquetas HTML existentes. Principalmente se utilizan para modificar la apariencia (modificando el estilo) o el comportamiento (modificando los handlers), de un elemento existente.

En segundo lugar, las directivas estructurales. Estas directivas, al contrario de lo que sucede con las directivas de atributo, modifican directamente la arborescencia del DOM HTML. Por lo tanto, pueden añadir, modificar o eliminar elementos durante la ejecución de la aplicación.

Para terminar, el último tipo de directivas es un poco particular. Se trata de los componentes. En efecto, los componentes son directivas que tienen la especificidad de estar asociadas a un template. Este último tipo no se abordará, porque hay un capítulo dedicado a los componentes.

2. Directivas comunes

Angular ofrece un conjunto de directivas. A continuación se muestran algunas de las más utilizadas.

1. Crear una directiva de atributo

Con el objetivo de crear una directiva de atributo, hay que crear una clase y añadirle el decorador @Directive. Este decorador recibe como argumento un selector. Este selector CSS se utilizará en las etiquetas HTML sobre las que se aplica la directiva.

import { Directive } from '@angular/core';  
  
@Directive({  
  selector: '[appBorde]'  
})  
export class BordeDirective {  
 constructor() { }  
} 

En el ejemplo anterior, los corchetes que se usan en el selector sirven para especificar que se trata de un atributo, como en CSS.

Una vez aplicado este decorador, hay que inyectar a nuestro constructor la referencia al elemento en el que se aplica la directiva, así como un renderer que va a permitir realizar las operaciones sobre este elemento. No hay que olvidar importar todos los tipos utilizados. Todos se sitúan en @angular/core.

import { Directive, ElementRef, Renderer } from '@angular/core'; 
  
@Directive({  
  selector: '[appBorde]'  
})  
export class BordeDirective {  
  
 constructor(  
    private el: ElementRef,   
    private renderer: Renderer  
  ) { }  
} 

Solo falta declarar esta directiva en el módulo de la aplicación. Para esto, hay que añadir la clase de la directiva en la tabla de declaraciones del decorador @NgModule.

@NgModule({  
  declarations: [  
    ...  
    BordeDirective  
  ],  
  imports: [...],  
  providers: [...],  
  bootstrap: [AppComponent]  
})  
export class AppModule { } 

A continuación, se muestra un ejemplo de directiva que va a añadir un borde negro al elemento sobre el que se aplica:

import { Directive, ElementRef, Renderer } from '@angular/core'; 
  
@Directive({  
  selector: '[appBorde]'  ...

1. La etiqueta <template> y el asterisco

Antes de seguir, es importante entender de dónde viene el asterisco que se utiliza como prefijo generalmente de las directivas estructurales. En efecto, estas directivas utilizan en realidad un template que se debe aplicar. Por ejemplo, la directiva NgIf va a aplicar o no un template, NgFor va a aplicar un template sobre una lista de objetos, etc.

Para utilizar NgIf, en realidad sería necesario utilizar la sintaxis siguiente:

<template [ngIf]="condición">  
  <div>  
    Este div se renderiza o no en función de la condición NgIf  
  </div>  
</template> 

Sin embargo, esta sintaxis es un poco pesada. Por este motivo existe un azúcar sintáctico que permite aligerar el framework. Se trata del asterisco que se usa como prefijo del atributo de estas directivas. Usando esta sintaxis en el ejemplo anterior, se convierte en lo siguiente:

<div *ngIf="condición">  
    Esta div se renderiza o no en función de la condición NgIf  
</div> 

En este caso, Angular va a desplazar la etiqueta div y su contenido a una etiqueta template. Por lo tanto, estas dos sintaxis son equivalentes.

2. Crear una directiva estructural

Con el objetivo de crear una directiva estructural, como para las directivas de atributos, hay que crear una clase y añadirle el decorador @Directive. Este decorador recibe como argumento un selector. Este selector CSS también se utiliza en las etiquetas HTML, en las que se aplicará la directiva.

import { Directive } from '@angular/core';  
  ...