Récapitulatif des liaisons de propriétés et d’événements
Liez les données aux composants et les événements émis par ceux-ci.
Récapitulatif des liaisons de propriétés et d’événements est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.
Deux directions pour le flux de données
Les modèles Angular déplacent les données dans deux directions : la liaison de propriété envoie les données vers le DOM, tandis que la liaison d’événement renvoie les actions de l’utilisateur au composant.
Interpolation
L’interpolation avec des doubles accolades affiche la valeur d’un composant sous forme de texte. Elle est unidirectionnelle, du composant vers la vue.
<p>{{ title }}</p>
// component
title = "Dashboard";Syntaxe de liaison de propriété
Les crochets lient la valeur d’un composant à la propriété d’un élément ou d’un composant. L’expression située à droite est évaluée puis affectée.
<img [src]="imageUrl" [alt]="caption">
// component
imageUrl = "/logo.png";
caption = "Logo";Lier des entrées de composant
La liaison de propriété transmet également des valeurs aux propriétés @Input d’un composant enfant.
<app-user [name]="userName"></app-user>
// parent component
userName = "Ada";Attribut ou propriété
La liaison de propriété cible les propriétés du DOM, et non les attributs HTML. Pour cibler des attributs purs, utilisez le préfixe attr..
<button [attr.aria-label]="label">Save</button>Syntaxe de liaison d’événement
Les parenthèses lient un événement du DOM à une méthode du composant. La méthode s’exécute lorsque l’événement est déclenché.
<button (click)="save()">Save</button>
// component
save() { console.log("saved"); }L’objet $event
La variable spéciale $event transmet les données de l’événement à votre gestionnaire.
<input (input)="onInput($event)">
// component
onInput(e: Event) {
this.text = (e.target as HTMLInputElement).value;
}Lier des sorties de composant
La liaison d’événement écoute également les événements @Output d’un composant enfant, émis via un EventEmitter.
<app-counter (changed)="onChange($event)"></app-counter>
// parent
onChange(value: number) { this.count = value; }Combiner les deux liaisons
Utiliser ensemble la liaison de propriété et la liaison d’événement sur une même propriété constitue la base de la liaison bidirectionnelle, que vous découvrirez ensuite.
<input [value]="name" (input)="name = $event.target.value">Liaisons de classes et de styles
Des liaisons de propriété spéciales activent ou désactivent des classes et des styles selon l’état du composant.
<div [class.active]="isActive"
[style.color]="textColor">
Item
</div>Conserver des modèles déclaratifs
Les liaisons maintiennent une relation déclarative entre les données et la vue. Angular met automatiquement à jour le DOM lorsque les valeurs liées changent.
Vérification rapide
Testez votre compréhension des liaisons de propriété et d’événement.
Récapitulatif
La liaison de propriété [prop] envoie les données vers la vue, la liaison d’événement (event) renvoie les actions, et l’interpolation affiche du texte. Combiner une liaison de propriété et une liaison d’événement sur la même valeur met en place une liaison bidirectionnelle.
Questions Fréquemment Posées
La leçon « Récapitulatif des liaisons de propriétés et d’événements » est-elle gratuite ?
Oui — le texte complet de « Récapitulatif des liaisons de propriétés et d’événements » 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 « Récapitulatif des liaisons de propriétés et d’événements » ?
Liez les données aux composants et les événements émis par ceux-ci. 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 1 sur 4.
Combien de temps prend la leçon « Récapitulatif des liaisons de propriétés et d’événements » ?
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
- Récapitulatif des liaisons de propriétés et d’événements
- Liaison bidirectionnelle avec ngModel
- Entrées de signaux model()
- Propriétés personnalisées compatibles avec la liaison bidirectionnelle