6-2 Afficher des valeurs avec l'interpolation

Angular maintient un lien entre le gabarit HTML et les propriétés de la classe.

Ainsi, dans le composant App, la portion {{ title() }} du gabarit fait directement référence à la propriété title de la classe App.

Vous pouvez modifier la balise h1 pour qu'elle ne contienne que {{ title() }}:

src/app/app.ts

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  template: `
    <h1>{{ title() }}!</h1>

    <router-outlet />
  `,
  styles: [],
})
export class App {
  protected readonly title = signal('Houdini');
}

info

On appelle ce principe l'interpolation de string. Cela permet d'inclure le contenu d'une variable de type string dans une autre chaine de caractère. Ici, l'autre chaine de caractère est le gabarit HTML et la string à afficher est le contenu de la propriété title.

Fonction title()

Mais pourquoi title() plutôt que title?

Lorsque vous appelez la fonction signal(), le type de retour est WritableSignal<string>. title fait donc référence à l'objet signal lui-même, ce n'est pas ce que nous voulons afficher! Ce que nous voulons afficher est le contenu stocké par cet objet. Pour ce faire, on l'appel comme une fonction (title()) et c'est ainsi le contenu de la variable qui est retourné.

Protected

Remarquez l'utilisation de protected pour title.

protected est un modificateur de portée de la propriété entre public et private. Les propriétés protected sont accessibles par la classe elle-même, les classes qui en hérite, ainsi que le gabarit HTML d'Angular.

Vous pouvez essayer de changer pour private et Webstorm vous affichera une erreur. Public fonctionnerait aussi, mais ce n'est pas tout à fait souhaité que les classes externes aient accès à cette propriété.

readonly

L'utilisation de readonly empêche de réassigner complètement l'objet signal (pas la valeur):

// Avec readonly
protected readonly title = signal('Houdini');

// Ceci génèrerait une erreur:
this.title = signal('autre chose');  // ❌ Ne peut pas réassigner avec readonly

// Mais on peut quand même changer la valeur!
this.title.set('nouveau titre');  // ✅ Fonctionne!

Anglular par défaut assigne readonly, mais bien honnêtement, ça frôle l'excès de précaution.

Modifier le titre du composant

Essayez de modifier la valeur de title dans la classe App pour la valeur Planificateur de projets Houdini.

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

Observez ensuite le résultat dans votre navigateur, le titre de la page devrait avoir changé en conséquence:

http://localhost:4200/

Modification en temps réel

Le lien entre le gabarit HTML et le composant est maintenu en permanence. De ce fait, modifier la valeur de title dans la classe App durant l'exécution de l'application aura un effet direct sur la valeur liée au niveau du gabarit HTML.

Nous verrons plus loin ce lien entre les propriétés de la classe associée au composant et son gabarit.