Reemplazo de getElementById en Angular

1. Reemplazo de getElementById en Angular
2. ElementRef en Angular
3. Obtenga valor de la entrada usando ElementRef en Angular

Presentaremos el reemplazo de la función getElementById en Angular.

También presentaremos la función ElementRef en Angular para obtener la referencia y el valor del elemento del documento de la entrada.

Reemplazo de getElementById en Angular

El método getElementById devuelve el elemento con el Atributo ID con el valor especificado. Este método es más común en HTML DOM y se usa casi cada vez que manipulamos, obtenemos información o un elemento de nuestro documento.

Debido a que getElementById es una función vanilla Javascript y usamos Typescript en Angular, el reemplazo de esta función en Typescript es ElementRef, que presentaremos en este tutorial.

ElementRef en Angular

El ElementRef es una clase que puede envolver un elemento DOM específico para mejorar los métodos y propiedades de un elemento nativo. Si definimos un elemento como ElementRef, podemos acceder a él como un objeto nativeElement.

Este artículo es compatible con Angular 4 a Angular 12.

Vamos a utilizar la interfaz ElementRef en una clase con el decorador @ViewChild para obtener la referencia del elemento.

En primer lugar, editaremos nuestra plantilla app.component.html y le agregaremos el siguiente código.

# angular

<div #myNameElem></div>

<button (click)="getValue()">Get Value</button>

Producción:

En el archivo app.component.ts, añadiremos lo siguiente.

#angular
import { Component, VERSION, ViewChild, ElementRef } from "@angular/core";
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})

export class AppComponent {
  name = "Angular " + VERSION.major;
  @ViewChild("myNameElem") myNameElem: ElementRef;
  getValue() {
    console.log(this.myNameElem);
    this.myNameElem.nativeElement.innerHTML = "I am changed by ElementRef & ViewChild";
  }
}

Producción:

Obtenga valor de la entrada usando ElementRef en Angular

Ahora presentaremos cómo obtener el valor de una entrada usando ElementRef en Angular.

En primer lugar, editaremos nuestra plantilla app.component.html y le agregaremos el siguiente código.

# angular
<input type="text" name="name" #myNameElem />
<button (click)="getValue()">Get Value</button>
<button (click)="resetValue()">Reset</button>

Producción:

Ahora, en el archivo app.component.ts, añadiremos lo siguiente:

#angular
import { Component, VERSION, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  @ViewChild('myNameElem') myNameElem: ElementRef;
  getValue() {
    console.log(this.myNameElem.nativeElement.value);
  }
  resetValue() {
    this.myNameElem.nativeElement.value = '';
  }
}

Producción: