En Angular, las directivas son una de las características más poderosas y flexibles. Permiten modificar el comportamiento del DOM de una manera declarativa. En esta sección, aprenderemos cómo crear nuestras propias directivas personalizadas para extender la funcionalidad de nuestras aplicaciones Angular.
¿Qué es una Directiva?
Una directiva en Angular es una clase que puede modificar el DOM de una manera específica. Existen tres tipos principales de directivas:
- Directivas de Atributo: Modifican el comportamiento de un elemento, atributo o componente existente.
- Directivas Estructurales: Cambian la estructura del DOM, añadiendo o eliminando elementos.
- Componentes: Son directivas con una plantilla asociada.
En esta sección, nos enfocaremos en las directivas de atributo personalizadas.
Creación de una Directiva Personalizada
Paso 1: Generar la Directiva
Angular CLI facilita la creación de directivas. Utilizaremos el siguiente comando para generar una directiva llamada highlight:
Este comando crea dos archivos:
highlight.directive.ts: Contiene la lógica de la directiva.highlight.directive.spec.ts: Contiene las pruebas unitarias para la directiva.
Paso 2: Implementar la Directiva
Abrimos el archivo highlight.directive.ts y modificamos el contenido para que nuestra directiva cambie el color de fondo del elemento al que se aplica.
import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef, private renderer: Renderer2) { }
@HostListener('mouseenter') onMouseEnter() {
this.highlight('yellow');
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
private highlight(color: string) {
this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
}
}Explicación del Código
- ElementRef: Permite acceder al elemento del DOM al que se aplica la directiva.
- Renderer2: Proporciona una forma segura y abstracta de manipular el DOM.
- @HostListener: Escucha eventos del host (el elemento al que se aplica la directiva).
La directiva HighlightDirective cambia el color de fondo del elemento a amarillo cuando el ratón entra en el elemento (mouseenter) y lo restablece cuando el ratón sale (mouseleave).
Paso 3: Usar la Directiva en una Plantilla
Para utilizar la directiva, simplemente añadimos el selector appHighlight al elemento en la plantilla de un componente.
Ejercicio Práctico
Objetivo: Crear una directiva personalizada que cambie el color del texto cuando se hace clic en el elemento.
- Genera una nueva directiva llamada
textColor. - Implementa la lógica para cambiar el color del texto a rojo cuando se hace clic en el elemento.
- Usa la directiva en una plantilla.
Solución:
- Generar la directiva:
- Implementar la lógica en
textColor.directive.ts:
import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';
@Directive({
selector: '[appTextColor]'
})
export class TextColorDirective {
constructor(private el: ElementRef, private renderer: Renderer2) { }
@HostListener('click') onClick() {
this.changeTextColor('red');
}
private changeTextColor(color: string) {
this.renderer.setStyle(this.el.nativeElement, 'color', color);
}
}- Usar la directiva en una plantilla:
Errores Comunes y Consejos
- No olvidar declarar la directiva en el módulo: Asegúrate de añadir la directiva en la sección
declarationsdel módulo correspondiente. - Uso incorrecto de
ElementRef: Evita manipular el DOM directamente usandoElementRef. UtilizaRenderer2para mantener la seguridad y compatibilidad con diferentes plataformas. - Selector incorrecto: Asegúrate de que el selector de la directiva esté correctamente definido y utilizado en la plantilla.
Conclusión
Las directivas personalizadas en Angular son una herramienta poderosa para modificar el comportamiento del DOM de manera declarativa. En esta sección, aprendimos a crear una directiva de atributo personalizada que cambia el color de fondo de un elemento. También vimos cómo utilizar ElementRef, Renderer2 y @HostListener para implementar la lógica de la directiva. Con esta base, puedes crear directivas más complejas y adaptarlas a las necesidades específicas de tu aplicación.
En el próximo módulo, exploraremos los servicios y la inyección de dependencias en Angular, lo que nos permitirá compartir datos y lógica entre diferentes partes de nuestra aplicación.
Curso de Angular 2+
Módulo 1: Introducción a Angular
- ¿Qué es Angular?
- Configuración del Entorno de Desarrollo
- Tu Primera Aplicación Angular
- Arquitectura de Angular
Módulo 2: Conceptos Básicos de TypeScript
- Introducción a TypeScript
- Variables y Tipos de Datos en TypeScript
- Funciones y Funciones Flecha
- Clases e Interfaces
Módulo 3: Componentes y Plantillas
- Creación de Componentes
- Plantillas de Componentes
- Estilos de Componentes
- Interacción entre Componentes
Módulo 4: Directivas y Pipes
Módulo 5: Servicios e Inyección de Dependencias
- Introducción a los Servicios
- Creación y Uso de Servicios
- Inyección de Dependencias
- Inyectores Jerárquicos
Módulo 6: Enrutamiento y Navegación
Módulo 7: Formularios en Angular
- Formularios Basados en Plantillas
- Formularios Reactivos
- Validación de Formularios
- Formularios Dinámicos
Módulo 8: Cliente HTTP y Observables
- Introducción al Cliente HTTP
- Realizando Solicitudes HTTP
- Manejo de Respuestas HTTP
- Uso de Observables
Módulo 9: Gestión de Estado
- Introducción a la Gestión de Estado
- Uso de Servicios para la Gestión de Estado
- NgRx Store
- NgRx Effects