Remplacement de getElementById dans Angular à l'aide de TypeScript
-
La méthode
document.getElementById()dans TypeScript -
Utilisez
ElementRefcomme remplacementgetElementByIddans Angular à l’aide de TypeScript
Ce guide du didacticiel fournit une brève explication du remplacement de document.getElementById dans Angular à l’aide de TypeScript.
Cela fournit également les meilleures méthodes utilisées pour getElementById dans Angular avec des exemples de code. Nous apprendrons également le but du querySelector DOM dans TypeScript.
Tout d’abord, apprenons la méthode document.getElementById dans TypeScript et pourquoi elle est populaire parmi la communauté des développeurs.
La méthode document.getElementById() dans TypeScript
Le document.getElementById() est une méthode JavaScript prédéfinie (ainsi que TypeScript) disponible pour la manipulation de l’objet document. Il retourne un élément avec une valeur spécifiée et null si l’élément n’existe pas.
Le document.getElementById() est l’une des méthodes les plus courantes et les plus populaires parmi la communauté des développeurs pour le DOM HTML.
Le seul point essentiel à garder à l’esprit est que si deux éléments ou plus ont le même identifiant, document.getElementById() renverra le premier élément.
Examinons maintenant quelques-uns des exemples de codage pour mieux comprendre leur objectif et leur utilisation.
Considérez la balise h1 avec du texte avec un identifiant demo unique. Maintenant, dans la section scripts, si nous voulons cibler cette balise particulière, nous utilisons la méthode getElementById() disponible dans l’objet 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>
Production:
Considérons maintenant un autre exemple dynamique : un champ d’entrée prend un nombre et renvoie sa valeur de cube.
<!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>
Production:
Maintenant, regardons le remplacement getElementById dans Angular en utilisant TypeScript.
Utilisez ElementRef comme remplacement getElementById dans Angular à l’aide de TypeScript
Le ElementRef de AngularJs est un wrapper autour d’un élément HTML, contenant la propriété nativeElement et contenant la référence à l’objet DOM sous-jacent. En utilisant ElementRef, nous pouvons manipuler le DOM dans AngularJs en utilisant TypeScript.
En utilisant ViewChild, nous obtenons le ElementRef d’un élément HTML à l’intérieur de la classe du composant. Angular permet d’injecter ElementRef de l’élément directif du composant lorsqu’il est demandé dans le constructeur.
Avec le décorateur @ViewChild, nous utilisons l’interface ElementRef à l’intérieur de la classe pour obtenir la référence de l’élément.
Considérons l’exemple suivant de code en AngularJs dans le fichier de main.component.html. Nous avons un bouton avec un événement et un div ayant un identifiant unique myName :
# angular
<div #myName></div>
<button (click)="getData()">Get Value</button>
Production:
Exemple 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";
}
}
Production:
En utilisant le décorateur @ViewChild, nous obtenons la référence de l’entrée à l’aide de l’interface ElementRef à l’intérieur de la classe. On change ensuite sa valeur à l’aide de la fonction getData() avec cette référence.
Exemple 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!";
}
}
Production:
Cela obtient la référence du champ de saisie et modifie son texte intérieur lors du clic sur le bouton.
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