Angular : comment sélectionner un élément Dom dans un composant ?
Le framework Angular a été conçu pour créer une interaction en temps réel entre le code HTML et le code JavaScript. Il fournit ses propres méthodes pour sélectionner un élément HTML à partir d'un composant ou d'une vue, sans devoir utiliser les méthodes du DOM JavaScript. Bien que le code de l'élément HTML dans Angular n'ait pas changé avec les années, les instructions pour sélectionner un élément ont quant à elles évolué au fur et à mesure des versions.
Pour sélectionner un élément HTML, vous devez lui donner une variable qui permettra de le reconnaître. Cette variable se définit en tant qu'attribut de l'élément avec le caractère "#" suivi du nom de la variable.
<textarea #monElementHTML id="note" name="note" [(ngModel)]="note" placeholder="{{ notePlaceholder }}" (blur)="majNote() ; noteEditMode = false" (click)="noteEditMode=false"> {{ todo.note }}
</textarea>
Cette notation est toujours la même, quelle que soit la version d'Angular utilisée.
Pour pouvoir manipuler l'élément dans le composant, si vous utilisez une version du framework antérieure à la version 4, il faut en premier importer le module "ElementRef". C'est ce module qui est utilisé pour pouvoir sélectionner un élément HTML et interagir avec. On utilise pour cela la directive "import".
import {ElementRef} from '@angular/core';
On utilise ensuite l'élément viewChild pour lier le composant à l'élément HTML. L'élément devient ainsi un attribut du composant.
@ViewChild('monElementHTML') monElement:ElementRef;
Dans le constructeur du composant, il faut appeler en paramètre un objet de la classe "Renderer". C'est cet objet qui va permettre l'interaction entre le composant et l'élément HTML.
constructor(private renderer: Renderer) {}
On utilise ensuite la fonction "invokeElementMethod()" de l'attribut "rd" du composant pour appeler la méthode de son choix pour l'élément. Elle prend en premier paramètre l'élément. On utilise alors la propriété "nativeElement" qui correspond à l'élément HTML. En deuxième paramètre, on indique la fonction JavaScript à appeler.
this.renderer.invokeElementMethod(this.monElement.nativeElement,'blur');
Lors de la sortie de la version 4 du framework, de nombreuses modifications ont été effectuées. Le module "Renderer" a été remplacé par le module "Renderer2". Il doit être importé dans le composant comme le module "ElementRef", puis déclaré dans le constructeur.
import {ElementRef,Renderer2} from '@angular/core';
constructor(private renderer: Renderer2) {}
Le module "Renderer2" offre de nombreuses méthodes pour interagir avec un élément, mais si vous souhaitez utiliser une méthode native du langage JavaScript, vous devez juste utiliser l'élément comme un attribut direct du composant.
this.monElement.nativeElement.blur();