Signaux dans les modèles
Liez directement les valeurs des signaux dans les modèles de composants.
Signaux dans les modèles est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Signaux dans les modèles
L’un des principaux avantages des signaux est que vous les lisez directement dans les modèles en les appelant, exactement comme en TypeScript. Aucun opérateur asynchrone n’est nécessaire.
Lecture dans une interpolation
Dans le modèle, appelez le signal à l’intérieur de l’interpolation entre doubles accolades pour afficher sa valeur.
@Component({
selector: 'app-counter',
template: '<p>Count: {{ count() }}</p>'
})
export class CounterComponent {
count = signal(0);
}Aucun opérateur asynchrone nécessaire
Avec les observables, vous aviez besoin de l’opérateur asynchrone pour vous abonner et vous désabonner. Les signaux sont synchrones : il vous suffit donc de les appeler. Il n’y a rien dont vous devez vous désabonner.
Mise à jour automatique de la vue
Lorsqu’un signal lu dans le modèle change, Angular sait que ce modèle en dépend et met à jour uniquement cette liaison. C’est la réactivité fine en action.
Appeler des signaux dans les gestionnaires d’événements
Liez les événements à des méthodes du composant qui mettent à jour les signaux. Le modèle restitue automatiquement les liaisons concernées.
@Component({
selector: 'app-counter',
template: '<button (click)="inc()">{{ count() }}</button>'
})
export class CounterComponent {
count = signal(0);
inc() { this.count.update(v => v + 1); }
}Signaux dans les liaisons de propriétés
Vous pouvez appeler un signal dans n’importe quelle liaison, notamment dans les liaisons de propriétés et d’attributs.
// disabled when count reaches 0
// template: <button [disabled]="count() === 0">Go</button>Signaux et flux de contrôle intégré
Les modèles modernes utilisent des blocs de flux de contrôle intégrés. Vous lisez un signal dans un bloc if en l’appelant.
// template:
// @if (count() > 0) {
// <p>Positive</p>
// }Signaux calculés dans les modèles
Les valeurs dérivées sont très utiles dans les modèles. Un signal calculé ne se recalcule que lorsque ses sources changent, et se lit de la même manière.
import { signal, computed } from '@angular/core';
export class CartComponent {
qty = signal(2);
price = signal(10);
total = computed(() => this.qty() * this.price());
}Lire un signal calculé dans la vue
Lisez le signal calculé dans le modèle comme n’importe quel signal.
// template: <p>Total: {{ total() }}</p>Pourquoi cette approche est efficace
Comme Angular suit précisément les expressions du modèle qui lisent chaque signal, il peut éviter le travail pour les parties de la vue qui ne dépendaient pas du signal modifié.
Piège courant : oublier les parenthèses
Si vous écrivez count au lieu de count() dans un modèle, vous afficherez la fonction du signal elle-même, et non sa valeur. Appelez toujours le signal.
Vérification rapide : modèles
Comment les signaux apparaissent-ils dans les modèles ?
Récapitulatif : signaux dans les modèles
Vous lisez les signaux dans les modèles en les appelant avec des parenthèses, sans opérateur asynchrone ni désabonnement nécessaire. Angular met à jour uniquement les liaisons qui dépendent d’un signal modifié, et les signaux calculés fonctionnent de la même manière. Vous avez terminé les notions fondamentales sur les signaux.
Questions Fréquemment Posées
La leçon « Signaux dans les modèles » est-elle gratuite ?
Oui — le texte complet de « Signaux dans les modèles » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Signaux dans les modèles » ?
Liez directement les valeurs des signaux dans les modèles de composants. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Signaux dans les modèles » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Que sont les signaux
- Créer et lire des signaux
- Mettre à jour les signaux avec set et update
- Signaux dans les modèles