Cómo manipular elementos del DOM con ElementRef en Angular
ElementRef en Angular es una clase que permite acceder y manipular directamente elementos del DOM dentro de un componente. Se usa principalmente cuando se necesita interactuar con elementos HTML de manera directa, como cambiar estilos o escuchar eventos nativos. Sin embargo, su uso debe ser cuidadoso para evitar problemas de seguridad o rendimiento.
¿Qué es ElementRef y cómo se utiliza?
En Angular, ElementRef se utiliza para obtener una referencia directa a un elemento del DOM dentro de un componente. Generalmente se inyecta en el constructor de la clase y se accede mediante la propiedad nativeElement. Aunque proporciona un control directo, se recomienda usarlo en combinación con métodos de Angular, como directivas y servicios, para un mejor manejo de cambios y evitar manipulación innecesaria del DOM.
Ejemplo de uso básico de ElementRef
import { Component, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-ejemplo',
template: `<p>Texto de ejemplo</p>`
})
export class EjemploComponent implements AfterViewInit {
constructor(private el: ElementRef) {}
ngAfterViewInit() {
this.el.nativeElement.querySelector('p').style.color = 'blue';
}
}
En este ejemplo, ElementRef se usa para cambiar el color del texto dentro del componente al azul.
Ejemplos adicionales
1. Cambiar el estilo de un elemento:
this.el.nativeElement.style.backgroundColor = 'yellow';2. Agregar un evento a un elemento específico:
this.el.nativeElement.addEventListener('click', () => alert('Elemento clicado!'));Referencia oficial
Para más información, consulta la documentación oficial de Angular sobre ElementRef.
Jorge García
Fullstack developer