Interagir avec l’utilisateur-Découvrir angular–Mon premier projet

Nous sommes en train de mettre en place une application Angular pour gérer la guerre des Clones.

Après avoir vu les composants, le templateUrl, nous passons à l’interaction avec l’utilisateur.

Gérer le clic sur un bouton

Pour gérer le clic sur un bouton, rendez-vous dans la Vue définie via l’url du TemplateUrl.

Ajouter un bouton, et indiquer au moteur de Vue Angular, que le click est lié à une méthode présente dans le Component :

<button (click)= »selectClone(null) »>Start war !</button>

Ici, selectClone est une méthode présente dans notre Component : AppComponent.

selectClone(clone: Clone) {

alert(‘Hey ‘ + (clone != null ? clone.name : « empty »));

}

Comment récupérer les valeurs saisies par l’utilisateur ?

Vu que nous sommes bien du côté client, et non côté serveur, nous n’avons pas besoin d’utiliser de Formulaire, puisqu’ici, nous n’allons rien envoyé (dans notre cas actuel) vers le serveur.

Ici, déjà, ça diffère d’une application web mvc.net core par exemple.

La méthode from scratch

Par exemple, vous souhaitez récupérer ce qui est saisi, en live par l’utilisateur :

1. Vous créez un champ <input type=”text” />
2. Vous vous attachez sur l’événement de keyup : <input type=”text” (keyup)=”onKeyPress($event)” />. Et vous passez l’objet javascript : event.
3. Et vous ajoutez une méthode onKeyPress dans votre Component.
4. Reste deux étapes. Tout d’abord, vous affichez dans votre vue, la valeur récupérée lors la pression sur une touche : {{keyPressValue}} (ceci à mettre dans votre vue)
5. Enfin, vous renseignez la valeur saisie dans la méthode onKeyPress, grâce à l’objet : this.keyPressValue = event.target.value;

La méthode Angular

Pour éviter de gérer les événements, dans les composants, Angular met à disposition une nouvelle façon de récupérer les éléments Html depuis un Component.

Pour y arriver, vous devez :

1. Déclarer une variable local du côté Vue. Cela se fait grâce au dièse : #monChampDeSaisie : <input type=”text” #monChampDeSaisie />
2. Passer la valeur de ce champ lors de l’événement de saisie d’une touche : <input type=”text” #monChampDeSaisie (keyup)=”onKeyPressAmeliore(monChampDeSaisie.value)” />
3. Vous pouvez alors : soit récupérer la valeur directement depuis le champ : {{ monChampDeSaisie.value }}, soit depuis l’attribut du Component : {{ keyPressValue  }}.

WARNING : l’événement est bien (keyup), pas (keyUp) ! Ca ne fonctionne pas sinon => sensibilité à la casse chez Angular.

Aller plus loin : filtrer un événement particulier

Vous pouvez choisir préciser quelle touche vous souhaitez récupérer sur l’événement keyup.

Allons-y, on va rajouter une précision à (keyup) : <input type=”test” #monChampDeSaisie2 (keyup.enter)=”monChampDeSaisie2.value” />

Cela va être très pratique par exemple, pour faire une validation : je saisie plusieurs caractères, et je confirme quand je tape sur la touche Entrée.

Détecter la perte de focus

Pour connaître quand l’utilisateur clique ailleurs que sur un objet html, il existe un événement : blur. Il s’agit de la perte de focus.

Vous allez utiliser la même compétence que pour le keyup ou le click : <input type=”text” #monChampDeSaisie3 (blur)=”onKeyPressAmeliore(monChampDeSaisie3.value)” />