Les signaux

1. Différents types de signaux

On peut distinguer deux types de signaux : les signaux de type WritableSignal qui permettent de contrôler la valeur manuellement à tout moment, et les signaux de type Signal, qui sont en lecture seule et se mettent à jour uniquement grâce à une logique définie à l’instanciation.

On peut instancier un signal de la première catégorie via la fonction signal() avec une valeur par défaut en paramètre. Ce signal peut être lu en l’invoquant comme une fonction à l’aide de parenthèses, sans nécessiter de paramètres. Pour mettre à jour le signal, on peut utiliser la méthode set() avec une nouvelle valeur en paramètre, ou bien update() qui permet, grâce à un callback en paramètre, de récupérer la valeur actuelle du signal avant de le modifier.

import { Component, signal } from '@angular/core'; 
 
@Component({ 
 selector: 'app-card', 
 template: ` <p>{{ text() }}</p> 
    <button (click)="onClick()">Click me to set</button> 
    <button (click)="onClickToUpdate()"> 
      Click me to update 
    </button>`, 
  styles: [], 
}) 
export class MyComponent { 
  text = signal<string>('Bonjour'); 
 
  onClick() { 
    this.text.set('Hello'); 
  } 
 
  onClickToUpdate() { 
    this.text.update((oldValue) => oldValue + ' Angular'); 
  } 
} 

1. Input et Output

Pour créer un signal d’entrée, nous devons déclarer une propriété et l’assigner avec la fonction input(). Voici un comparatif :

import { Component, Input, input } from '@angular/core'; 
 
@Component({...}) 
export class MyComponent { 
 
  @Input() value1: string = ''; 
 
  value2 = input<string>(''); 
} 

On peut passer deux paramètres à un Input, une valeur par défaut, et/ou un objet un peu plus complexe qui représente trois paramètres :

1. Structurer les signaux

Pour optimiser la réactivité et le rendu, on va prioriser les signaux pour toute variable intégrée au template, car ce sont celles-là qui déclencheront les mises à jour des composants (entre autres). Lorsque des variables doivent dépendre d’un signal, il faut penser à utiliser des Computed ou des LinkedSignal.

Il est acceptable d’appeler plusieurs fois le même signal dans le template pour des cas simples, mais il devient préférable d’utiliser un Computed si :

Quelques exemples :

// Non recommandé 
<div> 
  <h1>{{ title }}</h1> 
</div> 
 
... 
 
product = input.required<Product>(); 
get title(){ 
return `${this.product().title} ${this.product().quantity} 
} 
 
// Recommandé 
<div> 
  <h1>{{ title() }}</h1> 
</div> 
 
... 
 
product = input.required<Product>(); 
title = computed(()=> 
`${this.product().title} ${this.product().quantity} 
) 

De petits traitements peuvent être acceptables, une valeur par défaut par exemple. Seulement, utiliser un Computed peut être un bon choix lorsque ce traitement est répété plusieurs fois dans le template afin de simplifier le code et le rendre plus lisible.

<div> 
  <h1>{{product().title}}</h1> 
  <span>{{product().type}}</span> 
  <p>{{product().description}}</p> 
</div> 
 
... 
 
product = input.required<Product>(); 

On pourrait aussi varier l’affichage lorsqu’il y a beaucoup de valeurs, en utilisant...

1. Autres avantages des signaux

Un point important concernant les signaux mérite d’être souligné, notamment leur utilisation au sein des composants. Dans le chapitre Les composants, à la section Détection de changements, nous avions évoqué Zone.js, responsable de déclencher la détection de changements d’Angular. Les signaux jouent un rôle majeur dans l’amélioration de ce système.

Avec l’utilisation des signaux, Angular détecte qu’un signal a émis une modification sans nécessiter Zone.js pour déclencher la détection de changements. De plus, la détection ne parcourt plus l’arbre des composants pour vérifier chaque élément, mais cible directement la source du signal. Ce mécanisme représente un atout majeur pour les performances d’Angular.

Enfin, la caractéristique glitch-free ou "sans-anomalie" constitue un pilier fondamental. Cette propriété garantit qu’un callback de changement de valeur (Effect, signal calculé, etc.) ne sera jamais recalculé plus d’une fois par cycle de détection de changements. Concrètement, Angular orchestre intelligemment la propagation des changements en s’assurant qu’un signal calculé ou Effect n’est réévalué qu’une...

1. Migration vers les signaux

La première étape est de remplacer les @Input, @Output et @ContentChildren des éléments CardComponent, ColumnComponent, NavMenuComponent, UserCardComponent, DraggableDirective et DroppableDirective par leurs équivalents signaux. Attention à ne pas oublier d’utiliser des parenthèses lors de la récupération ou de l’affichage des valeurs des signaux.

Lorsque l’on a besoin d’afficher les propriétés d’un signal d’objet, par exemple dans le composant CardComponent, on peut appeler plusieurs fois le signal, utiliser des Computed pour chaque propriété, ou bien déclarer une propriété dans le template grâce à @let pour simplifier légèrement la syntaxe :

@let t = ticket(); 
<div id="wrapper" [class]="t.type"> 
  <h4>{{...