Les variables de référence template (template reference variables en anglais) constituent l'une des merveilles de Angular à connaître absolument !

Dans nos applications, nous sommes parfois amenés à interagir avec un utilisateur pour récupérer une valeur saisie dans un champ de texte par exemple. Pour se faire, on peut utiliser ngModel de façon très basique car cette directive permet de faire la lecture/écriture sur notre champ de texte.

Néanmoins, il existe une autre astuce très simpliste que nous pouvons également utiliser. Il s'agit de la variable de référence template (template reference variable en anglais).

En effet, la variable de référence template crée une référence de l'élement auquel il est attaché dans le template. Ainsi, nous avons une représentation en objet de notre élément qui sera de type HTMLElementdans notre cas. Prenons l'exemple suivant :

<input #username placeholder="Username">
<!-- username fait référence à input (qui est un élément HTML) --> 
<button (click)="showMyUsername(username.value)">Click me !</button>

Dans cet exemple, ce qui nous permet de faire username.value, c'est la variable de référence #username. C'est un objet de type HTMLElement. Du coup, toutes les propriétés et méthodes nous permettant de manipuler cet élément dans le DOM est accessible.

Ça devient intéressant n'est-ce pas ? 😁
L'autre surprise c'est que les éléments HTML ne sont pas les seuls concernés !

Supposons que nous ayons un composant avec des attributs de classe que nous utilisons dans le template de ce composant :

@Component({
  selector: 'app-my-component',
  template: `
    <div>
      <h1>Title {{ title }}</h1>
    </div>
  `
})
export class MyComponent {

   title = 'Angular';
}

Nous décidons d'accéder à ce composant depuis un autre en rajoutant une variable de référence template comme ceci :

<app-my-component #myComponent></app-my-component>

Nous pouvons accéder à l'attribut title en faisant myComponent.title. A titre d'exemple, nous avons :

<app-my-component #myComponent></app-my-component>

{{ myComponent.title }}
<!-- Angular -->

Il est également possible de modifier la valeur de l'attribut title.

C'est magique, n'est-ce pas ? 😂
Un dernier pour la route !
Aux dernières nouvelles, même sur les directives, ça fonctionne !

En se référant à la documentation de Angular, prenons cet exemple de code :

<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
  <label for="name">Name</label>
  <input type="text" id="name" class="form-control" name="name" ngModel required />
  <button type="submit">Submit</button>
</form>

<div [hidden]="!itemForm.form.valid">
  <p>{{ submitMessage }}</p>
</div>

Nous constatons clairement que la variable de référence itemForm fait référence à la directive ngForm et que nous pouvons piloter notre formulaire à travers cette variable.

En somme, il est toujours intéressant d'avoir plus d'un tour dans son sac comme le dit le dicton ! Nous savons à présent à quoi sert les variables de référence template (template reference variable en anglais) et comment les utiliser.

Pour plus d'informations 👉 Template Reference Variables