Creación y Uso de Directivas en Angular para Manipular el DOM

Curso de Angular: Componentes y Servicios

Contenido del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

20
Componentes y Servicios en Aplicaciones Web
01:09 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:38

Creación y Uso de Directivas en Angular para Manipular el DOM

Curso de Angular: Componentes y Servicios

Clase 17 de 20

Clase 17 / 20

Recursos

Angular utiliza el concepto de directiva para cambiar la apariencia o el comportamiento de un elemento en el HTML. Acá estaremos conociendo las directivas.

Tu primera directiva

Para crear tu primera directiva, es necesario usar el CLI de Angular con el comando ng generate directive test-name o en su forma corta ng g d test-name.

Al igual que con los servicios y los pipelines, el comando CLI creará un archivo .ts con el código de tu directiva y un archivo .spec.ts para sus respectivas pruebas unitarias.

El CLI también actualizará el archivo app.module.ts importando la directiva en las declarations[]. No olvides de asegurarte que se esté importando correctamente. De lo contrario, Angular no reconocerá la directiva.

Las directivas por defecto tienen el siguiente aspecto:

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

@Directive({
  selector: '[appTestName]'
})
export class TestNameDirective {
  constructor() { }
}

Utilizan el decorador @Directive() que contiene el nombre que utilizarás en el HTML para utilizar la directiva.

Manipulando estilos

En las directivas, puedes capturar el elemento HTML importando el servicio ElementRef y de esta manera poder cambiar los estilos de dicho elemento:

// directives/change-color.directive.ts
import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appChangeColor]'
})
export class ChangeColorDirective {
  constructor(
    private element: ElementRef
  ) {
    this.element.nativeElement.style.color = 'blue';
  }
}

<div>
    <p appChangeColor>Texto color azul.</p>
</div>

Escuchando eventos

Otra posibilidad que ofrecen las directivas, es la escucha de eventos. Haciendo uso del decorador @HostListener() e importado desde @angular/core puedes ejecutar una función cada vez que se produce un clic, hover, scroll o cualquier otro evento.

// directives/change-color.directive.ts
import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appChangeColor]'
})
export class ChangeColorDirective {

  @HostListener('mouseenter') onMouseEnter() {
    this.element.nativeElement.style.color = 'blue';
  }
  @HostListener('mouseleave') onMouseLeave() {
    this.element.nativeElement.style.color = '';
  }

  constructor(
    private element: ElementRef
  ) { }
}

<div>
    <p appChangeColor>Texto color azul al hacer hover.</p>
</div>

Pasando datos a una directiva

Finalmente, si tienes la necesidad de que tu directiva reciba algún tipo de valor, lo mejor es apoyarte en el decorador que ya conoces @Input().

// directives/change-color.directive.ts
import { Directive, Input, ElementRef } from '@angular/core';

@Directive({
  selector: '[appChangeColor]'
})
export class ChangeColorDirective {

  @Input() color!: string;

  constructor(
    private element: ElementRef
  ) {
    this.element.nativeElement.style.color = this.color;
  }
}

<div>
    <p appChangeColor [color]="'blue'">Texto color azul.</p>
</div>
<div>
    <p appChangeColor [color]="'red'">Texto color rojo.</p>
</div>
<div>
    <p appChangeColor [color]="'green'">Texto color verde.</p>
</div>

Puede ser algo difícil si recién estás comenzando con Angular imaginar un buen uso para una directiva propia. De momento, es importante saber que existen para poder implementarlas cuando llegue ese momento.

Ver código fuente del proyecto

Contribución creada con los aportes de Kevin Fiorentino.

Matias Romero

Hace 5 años

Nicolas, la documentación de Angular hace esta aclaración sobre "nativeEment : Utilice esta API como último recurso cuando se necesite acceso directo a DOM. En su lugar, use plantillas y enlaces de datos proporcionados por Angular. Alternativamente, puede echar un vistazo a Renderer2, que proporciona una API que se puede utilizar de forma segura incluso cuando no se admite el acceso directo a elementos nativos." Qué tipo de inconvenientes puede generar para que la coloquen como ultimo recursos y recomienden otra?

Nicolas Molina

Profesor

Hace 5 años

Es una muy buena advertencia, ya que Angular por detrás se encarga de hacer toda la manipulación de DOM necesaria y deberíamos evitar esto de ser posible, pero cuando lo tenemos que hacer una directiva sería una buena forma.

Javier Marin Ayza

Hace 4 años

También he leído sobre esto que es mejor utilizar Renderer2, según leí es por el hecho que con la forma que nos enseño Nico sólo se puede utilizar en los navegadores pero si quieres que se ejecute en appmovil, webworkers y bueno todo lo que no sea navegador se debe usar Renderer2 ya que si no no funcionaría. ' Aunque también utilizan lo de ElementRef para referenciar el objeto, os pongo como sería, simplemente es cambiar:

this.element.nativeElement.style.backgroundColor = 'red';

Por esta línea:

this.rend.setStyle(this.element.nativeElement, 'background-color','red');

La clase Redenderer2 tiene una serie de métodos para la manipulación del DOM os dejo enlace: Enlace a la página de Renderer2 ' No se si esta es la mejor forma de hacerlo o habría otra, pero os lo dejo por si os sirve de utilidad.

Comentarios (15)15 comentarios

Vsqz Gabriel

Hugo Bustamante

Juan Daniel Zuluaga Serna

Walter Maidana

Jimmy Buriticá Londoño

Juan Manuel Galindo Casillas

Luis Eduardo Cardozo

Federico González

Luis Gerardo López Hernández

Josue Alonso

Diego Frank Lipa Choque

Jeferson Correa

David Castro

Joaquin Davila Gallardo

Daniel Meza

Carlos Andrés Norato Gómez

WPOSS Ocaña

Hace un año

Leonardo Zuluaga

Brandon Lee Aguero Fernandez

Hace 3 años

Felipe Anibal Diaz Rodriguez

Miguel Angel Reyes Moreno

Componentes

Desarrollo de Tienda Online con Angular Avanzado

Creación y Gestión de Componentes en Angular

Comunicación de Componentes: Envío de Datos con Inputs en Angular

Comunicación de Eventos entre Componentes en Angular

Creación y Reutilización de Componentes en Angular para Tiendas

Ciclo de Vida de Componentes en Angular: Constructor a OnDestroy

Manejo de eventos y limpieza en Angular con ngOnDestroy y setters

Componentes en Angular: Creación y Organización de Productos

Estilos en Angular: Alcance y Maquetación de Componentes

Despliegue Dinámico de Menú Lateral en Angular

Comunicación Padre-Hijo con Inputs y Outputs en Angular

Servicios

Creación y uso de servicios en Angular para lógica de negocio

Inyección de Dependencias en Angular: Conceptos y Funcionamiento

Conexión a APIs usando HTTP Client Module en Angular

Pipes y Directives

Uso de Pipes en Angular: Transformación y Formatos

Creación de Pipes Personalizados en Angular

Creación y Uso de Directivas en Angular para Manipular el DOM

Best practices

Reactividad y Manejo de Estado en Angular con NGRX

Implementación de Linter en Angular para Buenas Prácticas de Código

Despedida

Componentes y Servicios en Aplicaciones Web

Creación y Uso de Directivas en Angular para Manipular el DOM

Progreso del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

Recursos

Recursos