Reemplazo de getElementById en Angular usando TypeScript
-
el método
document.getElementById()en TypeScript -
Use
ElementRefcomo reemplazo degetElementByIden Angular usando TypeScript
Esta guía de tutorial proporciona una breve explicación del reemplazo de document.getElementById en Angular usando TypeScript.
Esto también proporciona los mejores métodos utilizados para getElementById en Angular con ejemplos de código. También aprenderemos el propósito del DOM querySelector en TypeScript.
Primero, aprendamos el método document.getElementById en TypeScript y por qué es popular entre la comunidad de desarrolladores.
el método document.getElementById() en TypeScript
El document.getElementById() es un método predefinido de JavaScript (así como TypeScript) disponible para la manipulación del objeto documento. Devuelve un elemento con un valor especificado y null si el elemento no existe.
El document.getElementById() es uno de los métodos más comunes y populares entre la comunidad de desarrolladores para HTML DOM.
El único punto vital a tener en cuenta es que si dos o más elementos tienen el mismo id, document.getElementById() devolverá el primer elemento.
Ahora, veamos algunos de los ejemplos de codificación para comprender mejor su propósito y uso.
Considere la etiqueta h1 con algún texto con una identificación de demo única. Ahora, en la sección scripts, si queremos apuntar a esa etiqueta en particular, usamos el método getElementById() disponible en el objeto document.
<!DOCTYPE html>
<html>
<body>
<h1 id="demo">The Document Object</h1>
<h2>The getElementById() Method</h2>
<script>
document.getElementById("demo").style.color = "red";
</script>
</body>
</html>
Producción:
Ahora consideremos otro ejemplo dinámico: un campo de entrada toma un número y devuelve su valor de cubo.
<!DOCTYPE html>
<html>
<body>
<form>
Enter No:<input type="text" id="number" name="number"/><br/>
<input type="button" value="cube" onclick="getcube()"/>
</form>
<script>
function getcube(){
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
</body>
</html>
Producción:
Ahora, veamos el reemplazo de getElementById en Angular usando TypeScript.
Use ElementRef como reemplazo de getElementById en Angular usando TypeScript
El ElementRef de AngularJs es un contenedor alrededor de un elemento HTML, que contiene la propiedad nativeElement y mantiene la referencia al objeto DOM subyacente. Usando ElementRef, podemos manipular el DOM en AngularJs usando TypeScript.
Al usar ViewChild, obtenemos el ElementRef de un elemento HTML dentro de la clase del componente. Angular permite inyectar ElementRef del elemento directivo del componente cuando está siendo solicitado en el constructor.
Con el decorador @ViewChild, usamos la interfaz ElementRef dentro de la clase para obtener la referencia del elemento.
Considere el siguiente ejemplo de código en AngularJs en el archivo de main.component.html. Tenemos un botón con un evento y un div con una identificación única myName:
# angular
<div #myName></div>
<button (click)="getData()">Get Value</button>
Producción:
Ejemplo 1 (app.component.ts):
#angular
import { Component, VERSION, ViewChild, ElementRef } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./main.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
name = "Angular " + VERSION.major;
@ViewChild("myName") myName: ElementRef;
getData() {
console.log(this.myName);
this.myName.nativeElement.innerHTML = "I am changed by ElementRef & ViewChild";
}
}
Producción:
Usando el decorador @ViewChild, obtenemos la referencia de la entrada con la ayuda de la interfaz ElementRef dentro de la clase. Luego cambiamos su valor usando la función getData() con esta referencia.
Ejemplo 2 (app.component.ts):
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 {
name = "Angular";
@ViewChild("ipt", { static: true }) input: ElementRef;
ngAfterViewInit() {
console.log(this.input.nativeElement.value);
}
onClick() {
this.input.nativeElement.value = "test!";
}
}
Producción:
Esto obtiene la referencia del campo de entrada y cambia su texto interior al hacer clic en el botón.
Ibrahim is a Full Stack developer working as a Software Engineer in a reputable international organization. He has work experience in technologies stack like MERN and Spring Boot. He is an enthusiastic JavaScript lover who loves to provide and share research-based solutions to problems. He loves problem-solving and loves to write solutions of those problems with implemented solutions.
LinkedIn