Blog ENI : Toute la veille numérique !
En raison d'une opération de maintenance, le site Editions ENI sera inaccessible le mardi 10 décembre, en début de journée. Nous vous invitons à anticiper vos achats. Nous nous excusons pour la gêne occasionnée
En raison d'une opération de maintenance, le site Editions ENI sera inaccessible le mardi 10 décembre, en début de journée. Nous vous invitons à anticiper vos achats. Nous nous excusons pour la gêne occasionnée
  1. Livres et vidéos
  2. Angular
  3. Les interactions utilisateur
Extrait - Angular Développez vos applications web avec le framework JavaScript de Google (3e édition)
Extraits du livre
Angular Développez vos applications web avec le framework JavaScript de Google (3e édition) Revenir à la page d'achat du livre

Les interactions utilisateur

Qu’est-ce que l’event binding ?

Lorsqu’un utilisateur interagit avec un lien, appuie sur un bouton, choisit un événement dans une liste déroulante ou manipule du texte, il est important que l’application puisse réagir à ces différents événements.

Ce chapitre explique dans un premier temps l’event binding (liaison d’événement) qui permet à une application Angular d’exécuter du code, des actions, lorsqu’un événement est levé.

Il est d’usage d’avoir un flux où le composant va impacter la vue en fonction de son état. Cette fois-ci, il s’agit d’un flux où la vue va notifier le composant d’une interaction.

Le seul moyen pour détecter les interactions de l’utilisateur est d’être à l’écoute de certains événements, tels que les frappes au clavier, les mouvements de souris, les clics, les manipulations tactiles, etc.

C’est donc via le concept d’event binding que l’application s’abonne aux différentes interactions.

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

1. Comment manipuler l’objet $event ?

Les exemples précédents n’utilisent que la méthode click d’un bouton, cependant il existe, bien entendu, plusieurs types d’événements et notamment ceux renvoyant une entrée utilisateur. L’exemple le plus concret est une touche du clavier sur lequel l’utilisateur va taper.

Un objet est disponible dans la variable $event fournie par Angular. C’est cet objet qui contient la donnée que nous voulons récupérer. Une première solution est de passer cet objet $event dans une méthode et d’aller chercher l’entrée utilisateur à l’intérieur.

Dans l’exemple qui suit, nous allons tout simplement concaténer les entrées une par une, en les séparant d’une virgule.

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 + ','; 
  } 
} 

Le composant possède une méthode onKeyUp qui prend un paramètre, c’est l’événement du navigateur, dont il est possible de récupérer le event.key, correspondant à la touche saisie à chaque événement. Cette méthode onKeyUp est alors appelée sur l’événement keyup de l’input présent dans le template du composant.

La structure et la forme...