Angular16 est la nouvelle version majeure du framework Angular, et sa sortie est déjà effective. cette version, qui comprend plusieurs nouvelles fonctionnalités et améliorations qui étaient attendues avec impatience.
Aujourd’hui nous allons nous penché sur la sortie de ANGULAR SIGNALS
La fonctionnalité de signal dans Angular a été intégrée avec la version 16 de la bibliothèque @angular/core. Cette fonctionnalité offre la possibilité de définir des valeurs réactives et d’exprimer les relations de dépendance entre ces valeurs.
Voici quelques utilisations courantes des signaux :
-
Gestion des états : Les signaux peuvent être utilisés pour représenter l’état d’un composant ou d’une fonctionnalité spécifique. Lorsqu’un signal est mis à jour, les parties de l’application qui dépendent de ce signal peuvent être notifiées et réagir en conséquence.
-
Déclenchement d’effets : Les signaux peuvent être utilisés pour déclencher des effets ou des actions spécifiques lorsqu’une valeur change. Par exemple, vous pouvez définir un effet qui s’exécute chaque fois qu’un signal particulier est mis à jour, ce qui permet de réaliser des actions supplémentaires telles que l’envoi de données à un serveur ou la mise à jour de l’interface utilisateur.
-
Gestion des dépendances : Les signaux permettent de définir des dépendances entre différentes valeurs réactives. Lorsqu’un signal sur lequel dépend un autre signal est mis à jour, cela déclenche automatiquement la mise à jour des signaux dépendants.
-
Calcul de valeurs dérivées : Les signaux peuvent être utilisés pour calculer des valeurs dérivées basées sur d’autres signaux. Par exemple, vous pouvez définir un signal qui représente la somme de deux autres signaux, et chaque fois que les signaux d’origine sont mis à jour, le signal calculé est automatiquement mis à jour.
signal()
Supposons que nous opérons une application de liste de tâches (to-do list) où chaque tâche peut être marquée comme étant achevée ou en attente. Lorsqu’une tâche est marquée comme terminée, notre objectif est de mettre à jour automatiquement le compteur des tâches achevées, visible pour l’utilisateur.
Pour accomplir cela à l’aide des signaux, nous exploitons la fonction de signal pour instaurer un signal nommé « isTaskCompleted » qui reflète l’état d’une tâche spécifique. Par exemple :
import { signal } from ‘@angular/core’;
// Création d’un signal pour l’état de la tâche
const isTaskCompleted = signal(false);
Dans ce contexte, nous instaurons un signal nommé « isTaskCompleted » avec une valeur initiale de false, représentant ainsi le statut initial « non terminé » de la tâche.
Considérons à présent l’existence d’une fonction responsable de marquer une tâche comme étant achevée :
function markTaskAsCompleted() {
// Mettre à jour la valeur du signal
isTaskCompleted.set(true);
}
Lors de l’appel de cette fonction, elle actualise la valeur du signal « isTaskCompleted » en la définissant à true, ce qui indique que la tâche a été accomplie.
COMPUTED()
À présent, nous allons générer un autre signal nommé « completedTasksCount » qui symbolise le décompte global des tâches achevées au sein de 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;
});
Dans cet exemple, la fonction computed est utilisée pour créer un signal calculé nommé « completedTasksCount » qui est influencé par le signal « isTaskCompleted », ainsi que d’autres signaux non explicités ici. Ce signal calculé incorpore une logique de calcul pour déterminer le total des tâches achevées dans notre liste de tâches.
À chaque modification de la valeur du signal « isTaskCompleted », le signal calculé « completedTasksCount » est automatiquement recalculé en fonction de cette nouvelle valeur. Ainsi, lorsque nous marquons une tâche comme terminée à l’aide de la fonction « markTaskAsCompleted », le signal « completedTasksCount » est mis à jour pour refléter le nouveau nombre de tâches achevées.
En conclusion, la valeur du signal « completedTasksCount » peut être utilisée pour présenter à l’utilisateur le nombre de tâches achevées.
console.log(`Nombre de tâches terminées : ${completedTasksCount()}`);
effet()
Voici le code complet d’une simple application de liste de tâches utilisant les signaux :
import { Component, signal, computed, effect } from ‘@angular/core’;
interface Task {
id: number;
description: string;
isCompleted: boolean;
}
@Component({
selector: ‘app-todo-list’,
template: `
<h2>Ma liste de tâches</h2>
Tâche terminée: {{ isTaskCompleted() }}
<ul>
<li *ngFor= »let task of tasks »>
{{ task.description }}
<button (click)= »markTaskAsCompleted(task) »>Terminée</button>
</li>
</ul>
<p>Nombre de tâches terminées : {{ completedTasksCount() }}</p>
`,
})
export class TodoListComponent {
tasks: Task[] = [
{ id: 1, description: ‘Faire les courses’, isCompleted: false },
{ id: 2, description: ‘Nettoyer la maison’, isCompleted: false },
{ id: 3, description: ‘Répondre aux e-mails’, isCompleted: false },
];
isTaskCompleted = signal(false);
completedTasksCount = computed(() => {
return this.tasks.filter(task => task.isCompleted).length;
});
constructor() {
effect(() => {
console.log(‘Nombre de tâches terminées :’, this.completedTasksCount());
});
}
markTaskAsCompleted(task: Task) {
task.isCompleted = true;
this.isTaskCompleted.set(true);
}
}
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.