5-8 Variables et Signals

Remarquez que App est une classe et que cette dernière contient une propriété title. Cette dernière (title) est de type WritableSignal<string>:

Cette propriété est utilisée dans la région template à l'aide des moustaches {{ }} pour faire afficher le contenu de la variable.

À propos des signal

Un signal est un conteneur réactif qui encapsule une valeur et notifie automatiquement Angular lorsque cette valeur change.

Au lieu d'avoir une simple variable title = "Mon App", vous créez un signal avec title = signal("Mon App"). Pour lire la valeur, vous appelez le signal comme une fonction: title(). Pour la modifier, vous utilisez .set() pour remplacer la valeur.

L'avantage principal est la performance: quand un signal change, Angular met à jour seulement les parties de l'interface qui utilisent ce signal spécifique, plutôt que de vérifier tous les composants de l'application.

C'est une fonctionnalité relativement nouvelle dans l'écosystème Angular.

astuce

Si vous avez fait du Vue, c'est l'équivalent de ref() en Vue.

Modifier le signal title

Essayez de modifier la valeur du signal title afin de mettre un "H" majuscule, par exemple:

src/app/app.component.ts

export class App {
  protected readonly title = signal('Houdini');
}

Vous verrez le changement se répercuter dans la page.

http://localhost:4200

Bienvenue dans l'application Houdini

info

Lorsque vous déclarez une variable avec signal(), la valeur que vous passez à la fonction est la valeur initiale de la variable. Le type sera inféré automatiquement (ex.: string).

protected veut dire que la variable est accessible à la classe et aussi au template, sans toutefois être publique.

Nous aurons l'occasion d'expérimenter avec les signals prochainement.