# Les variables de référence template en Angular. De quoi s'agit t-il ?

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 `HTMLElement`dans notre cas. Prenons l'exemple suivant :

```xml
<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 :

```typescript
@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 :

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

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

```xml
<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 :

```xml
<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](https://angular.io/guide/template-reference-variables)