ElementRef en Angular

Presentaremos qué es ElementRef y cómo usarlo en Angular.

Use ElementRef para obtener el elemento DOM en Angular

ElemenRef es un envoltorio alrededor de un objeto de elemento DOM nativo que contiene la propiedad nativeElement. Contiene la referencia al elemento DOM, y podemos usarlo para manipular el DOM. Se usa con ViewChild para obtener el elemento HTML de la clase del componente.

Veamos un ejemplo para entender ElementRef en detalle y saber cómo usarlo en nuestra aplicación.

Primero, necesitamos importar ViewChild, ElementRef, Component y AfterViewInit desde @angular/core en el archivo app.component.ts.

Una vez que los hayamos importado, crearemos un ElementRefDiv usando ViewChild en nuestra clase. Y crearemos una función ngAfterViewInit que pasará el valor a nuestro div.

Así que nuestro código en app.component.ts se verá como a continuación.

# angular
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild('ElementRefDiv') ElementView: ElementRef;

  ngAfterViewInit() {
    console.log(this.ElementView);
    this.ElementView.nativeElement.innerHTML = 'Hello I am Using ElementRef To Display this!';
  }
}

Necesitamos crear una plantilla en app.component.html con la clase ElementRefDiv.

# angular
<div #ElementRefDiv></div>

Producción:

Entonces, con estos simples pasos, podemos manipular cualquier elemento DOM usando su ElementRef y ViewChild.