Les interactions utilisateur

S’abonner à un événement

La syntaxe d’un event binding est relativement simple, il suffit de décorer de parenthèses le nom de l’événement DOM à écouter et de fournir la méthode à exécuter sur cet événement. Voici un exemple basique qui permet d’exécuter la méthode doSomething lorsqu’un utilisateur appuie sur le bouton concerné. 

<button (click)="doSomething()">Cliquez-ici</button> 

Ici, le composant sait alors que lorsque l’événement (click) est lancé, il faut exécuter le code suivant : doSomething().

Une forme canonique est aussi à disposition du développeur. Il s’agit uniquement d’une différence syntaxique, cela ne change en rien les mécanismes internes. 

  <button on-click="doSomething()">Cliquez-ici</button> 

Dans un binding, le code est exécuté dans le contexte du composant, c’est donc la méthode doSomething du composant qui est lancée.

Voici un exemple avec un composant qui, dans son template, affiche un compteur et possède un bouton qui est censé appeler la méthode incrementTotal. 

import { Component } from '@angular/core'; 
 
@Component({ 
  selector: 'app-input-sample', 
  template: ` 
  <button (click)="incrementTotal()">Incrémenter</button> 
  Total : {{total}} 
  ` 
}) 
export class InputSampleComponent { 
  total:number = 0; 
 
  incrementTotal() 
  { 
    this.total++; 
  } 
} 

En regardant le composant, la méthode incrementTotal existe bel et bien. Elle est donc...

Récupérer une entrée utilisateur

import { Component} from '@angular/core'; 
 
@ Component({ 
  selector: 'app-input-keystroke', 
  template: ` 
  <input (keyup)="onKeyUp($event)"> 
  <p>{{keys}}</p>` 
}) 
 
export class InputKeystrokeComponent { 
 
  keys = ''; 
 
  onKeyUp(event:KeyboardEvent) 
  { 
    this.keys += event.key + ','; 
  } 
}