La version 16 d’Angular est arrivée avec son lot de nouveautés, aujourd’hui nous allons nous intéresser à AngularSignals. Voici tout de même un aperçu des autres nouveautés de cette mise à jour :
- Repenser la réactivité.
- Interopérabilité RxJS.
- Rendu et « hydratation » côté serveur.
- Outils améliorés pour les composants standalone, les directives et les « pipes ».
- Nouvelle collection ng « standalone ».
- Amélioration des outils de développement.
- Ajout de l’autocomplétion pour les imports dans les templates.
Angular signals
Le concept de signal dans Angular est une fonctionnalité introduite dans la version 16 de la bibliothèque @angular/core. Il permet de définir des valeurs réactives et d’exprimer des dépendances entre ces valeurs.
Angular Signals permet :
- Gestion des états : Les signaux reflètent l’état d’un composant ou d’une fonctionnalité, informant les parties dépendantes des changements.
- Déclenchement d’effets : Les signaux activent des actions spécifiques lorsque leurs valeurs changent, comme l’envoi de données ou la mise à jour de l’interface.
- Gestion des dépendances : Les signaux établissent des liens entre les valeurs réactives, déclenchant des mises à jour automatiques des signaux dépendants lorsque les signaux sources changent.
- Calcul de valeurs dérivées : Les signaux permettent de créer des valeurs basées sur d’autres signaux, assurant des mises à jour automatiques à chaque modification des signaux originaux.
Les signaux rendent l’utilisation de Zone.js facultatif dans les futures versions d’Angular. Cela réduit la dépendance à Zone.js, améliore les performances en informant Angular des changements dans le modèle de données sans nécessiter Zone.js pour la détection des changements et les tâches asynchrones.
(source : https://angular.fr/signals/).
signal()
import { signal } from ‘@angular/core’;
// Création d’un signal pour l’état de la tâche
const isTaskCompleted = signal(false);
Dans cet exemple, nous créons un signal isTaskCompleted avec une valeur par défaut de false, ce qui signifie que la tâche n’est pas terminée initialement.
Ici dans cet exemple, .set() nous permet de changer la valeur de la variable isTaskCompleted à true.
Il est nécessaire dans la template d’appeler isTaskCompleted() ainsi. Grâce à Signal, la donnée sur le site change directement en écrasant l’ancienne.
Computed()
Maintenant, nous pouvons créer un autre signal appelé completedTasksCount qui représente le nombre total de tâches terminées dans notre liste :
import { computed } from ‘@angular/core’;
// Création d’un signal calculé pour le nombre de tâches terminées
const completedTasksCount = computed(() => {
// Logique de calcul du nombre de tâches terminées
const tasks = getAllTasks();
return tasks.filter(task => task.isCompleted).length;
});
Effet()
La fonction effect est utilisée pour créer un effet. Elle prend en argument une fonction callback qui sera exécutée lorsque les signaux dépendants changent. Dans ce cas, la fonction callback est une fonction fléchée sans arguments.
effect(() => { console.log(‘Nombre de tâches terminées :’, this.completedTasksCount()); });