Angular - 5.11-Utilisation de références locales dans les modèles

Reprenons notre cockpit. Jusqu'ici, nous utilisons une liaison à double sens [(ngModel)] pour récupérer en continu le nom et le contenu du serveur saisis dans les champs <input>. Rien d'incorrect dans cette approche, mais comme nous n'utilisons ces valeurs qu'au moment précis où l'utilisateur clique sur « Ajouter le serveur », il est plus économique d'aller simplement chercher les valeurs à ce moment-là. Angular offre une fonctionnalité élégante pour ça : les références locales.

Comment créer et utiliser une référence locale

On place une référence locale sur n'importe quel élément HTML d'un template — pas forcément un <input>. La syntaxe : un dièse # suivi du nom de notre choix. Cette référence pointe vers l'élément complet (avec toutes ses propriétés DOM), pas seulement vers sa valeur :

<input type="text" class="form-control" #serverNameInput>
<button class="btn btn-primary" (click)="onAddServer(serverNameInput)">
  Ajouter le serveur
</button>

• une référence locale est utilisable uniquement dans le template (jamais dans le code TypeScript) ;
• on peut la passer comme argument à un gestionnaire d'événement, comme ici onAddServer(serverNameInput) ;
• côté TypeScript, le paramètre reçu est l'élément DOM complet — on accède alors à la valeur via serverNameInput.value ;
• une fois la référence en place, on peut supprimer le two-way binding [(ngModel)] qui devient inutile.

Les références locales sont une fonctionnalité très pratique pour atteindre un élément précis du template et le transmettre à une méthode quand il faut juste lire sa valeur ponctuellement — sans la lourdeur d'une liaison à double sens permanente.