Angular - 5.12-Accéder au modèle et au DOM avec @ViewChild

Dans la leçon précédente, nous avons découvert les références locales et nous les passons depuis le template lors de l'appel d'une méthode. Cela fonctionne, mais il existe une autre manière d'accéder à une référence locale — ou à n'importe quel élément — directement depuis le code TypeScript, parfois avant même qu'une méthode soit appelée. Le décorateur en question est @ViewChild.

Sélectionner un élément avec @ViewChild

On commence par ajouter une référence locale #serverContentInput sur l'input correspondant. Dans la classe du cockpit, on déclare ensuite une propriété décorée avec @ViewChild, importé depuis @angular/core. Le décorateur prend un argument qui désigne ce qu'on veut sélectionner :

@ViewChild('serverContentInput') serverContentInput: ElementRef;

onAddServer(serverNameInput: HTMLInputElement) {
  console.log(this.serverContentInput.nativeElement.value);
}

• passer une chaîne (par exemple 'serverContentInput') cible une référence locale ;
• passer un type de composant (par exemple CockpitComponent) cible la première occurrence de ce composant dans le template ;
• la valeur retournée est de type ElementRef (à importer aussi depuis @angular/core) — la valeur réelle de l'input s'obtient via nativeElement.value ;
• contrairement à la référence locale passée en argument, qui donnait directement l'élément complet, @ViewChild renvoie une enveloppe ElementRef.

C'est l'outil idéal quand le composant doit accéder à un élément ou à un enfant avant d'avoir reçu un clic. Dans la plupart des cas, c'est la sélection par référence locale qui revient le plus souvent.