Existe-t-il une alternative à document.getElementById dans Angular / TypeScript ?
Le framework Angular est un framework complet qui permet d'écrire un site entier avec le langage JavaScript. Il fournit un ensemble de librairies permettant de gérer entièrement le front-end. Il fournit des méthodes qui remplacent celles du langage JavaScript afin d'obtenir une syntaxe complète. Ainsi, la méthode "document.getElementById", qui permet de sélectionner un élément du DOM en fonction de son identifiant, a son équivalent dans le framework.
Pour pouvoir manipuler un élément, il faut tout d'abord lui donner un identifiant lorsqu'on le crée avec le framework. C'est possible en utilisant le caractère "#" suivi de l'identifiant que l'on souhaite associer à l'élément. Comme dans le langage JavaScript, celui-ci doit être unique sur la page web. Pour sélectionner cet élément, on peut ensuite utiliser la méthode "@ViewChild". Elle accepte en paramètre l'identifiant de la division. Si vous utilisez la version 8 du framework, cette méthode nécessite un deuxième paramètre. Vous devez mettre un objet avec l'attribut "static" dedans. Fixer à "True" cette valeur permet de l'utiliser dans la fonction "ngOnInit()".
import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
@Component({
selector: 'app',
template: `
<div #maDiv>Voici ma division</div>
`,
})
export class AppComponent implements AfterViewInit {
@ViewChild('maDiv') maDiv: ElementRef;
//À partir d'Angular 8
@ViewChild('maDiv', { static: false }) maDiv: ElementRef;
ngAfterViewInit() {
console.log(this.maDiv.nativeElement.innerHTML);
}
}
Angular fournit une autre possibilité pour utiliser "document.getElementById". Il est possible d'importer l'objet "Document" directement dans le framework. Le framework fournit alors sa propre couche d'abstraction de la classe JavaScript "Document". Utilisez-la plutôt que l'objet JavaScript, car les développeurs peuvent apporter des améliorations et elle reste compatible avec le framework.
import { Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Component({...})
export class AppCmp {
constructor(@Inject(DOCUMENT) document) {
document.getElementById('maDiv');
}
}