Remplacement de getElementById dans Angular

1. Remplacement de getElementById dans Angular
2. ElementRef dans Angular
3. Obtenir la valeur de l’entrée en utilisant ElementRef dans Angular

Nous allons introduire le remplacement de la fonction getElementById dans Angular.

Nous introduirons également la fonction ElementRef dans Angular pour obtenir la référence et la valeur de l’élément du document à partir de l’entrée.

Remplacement de getElementById dans Angular

La méthode getElementById renvoie l’élément avec l’attribut ID avec la valeur spécifiée. Cette méthode est la plus courante dans HTML DOM et est utilisée presque chaque fois que nous manipulons, obtenons des informations ou des éléments de notre document.

Parce que getElementById est une fonction vanilla Javascript et que nous utilisons Typescript dans Angular, le remplacement de cette fonction dans Typescript est ElementRef que nous présenterons dans ce tutoriel.

ElementRef dans Angular

ElementRef est une classe qui peut s’enrouler autour d’un élément DOM spécifié pour améliorer les méthodes et les propriétés d’un élément natif. Si nous définissons un élément comme un ElementRef, nous pouvons y accéder comme un objet nativeElement.

Cet article est compatible avec Angular 4 à Angular 12.

Utilisons l’interface ElementRef dans une classe avec le décorateur @ViewChild pour obtenir la référence de l’élément.

Tout d’abord, nous allons éditer notre modèle app.component.html et y ajouter le code suivant.

# angular

<div #myNameElem></div>

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

Production :

Dans le fichier app.component.ts, nous ajouterons ce qui suit.

#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";
  }
}

Production :

Obtenir la valeur de l’entrée en utilisant ElementRef dans Angular

Nous allons maintenant présenter comment obtenir la valeur d’une entrée en utilisant ElementRef dans Angular.

Tout d’abord, nous allons éditer notre modèle app.component.html et y ajouter le code suivant.

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

Production :

Maintenant, dans le fichier app.component.ts, nous allons ajouter ce qui suit :

#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 = '';
  }
}

Production :