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.
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”));
}
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.
Par exemple, vous souhaitez récupérer ce qui est saisi, en live par l’utilisateur :
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 :
WARNING : l’événement est bien (keyup), pas (keyUp) ! Ca ne fonctionne pas sinon => sensibilité à la casse chez Angular.
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.
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)” />