Propriétés personnalisées compatibles avec la liaison bidirectionnelle
Exposez vos propres entrées compatibles avec la liaison bidirectionnelle.
Propriétés personnalisées compatibles avec la liaison bidirectionnelle 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.
Liaison bidirectionnelle personnalisée
Vous pouvez rendre la propriété de n’importe quel composant compatible avec la liaison bidirectionnelle. Angular propose deux approches : la paire classique @Input et @Output, ou le signal moderne model().
La convention de nommage
Pour que la liaison bidirectionnelle fonctionne, le nom de la sortie doit être le nom de l’entrée suivi du suffixe Change. Par exemple, l’entrée size nécessite la sortie sizeChange.
Déclarer l’entrée
Commencez par une entrée ordinaire que le parent peut définir.
import { Input } from "@angular/core";
export class RatingComponent {
@Input() value = 0;
}Déclarer la sortie correspondante
Ajoutez un EventEmitter @Output nommé avec le suffixe Change.
import { Input, Output, EventEmitter } from "@angular/core";
export class RatingComponent {
@Input() value = 0;
@Output() valueChange = new EventEmitter<number>();
}Émettre lors d’une mise à jour
Lorsque le composant modifie la valeur en interne, mettez à jour la propriété et émettez la nouvelle valeur afin que le parent reste synchronisé.
setValue(v: number) {
this.value = v;
this.valueChange.emit(v);
}Lier depuis le parent
Le parent peut maintenant utiliser la syntaxe banane dans une boîte avec votre propriété personnalisée.
<app-rating [(value)]="score"></app-rating>
// parent
score = 3;Exemple complet d’entrée/sortie
Voici un composant personnalisé complet compatible avec la liaison bidirectionnelle, utilisant l’API classique.
@Component({
selector: "app-rating",
template: "<button (click)='bump()'>{{ value }}</button>"
})
export class RatingComponent {
@Input() value = 0;
@Output() valueChange = new EventEmitter<number>();
bump() {
this.value++;
this.valueChange.emit(this.value);
}
}L’approche moderne avec model
Le même comportement est beaucoup plus court avec model(), qui crée pour vous la paire entrée/sortie.
import { model } from "@angular/core";
@Component({
selector: "app-rating",
template: "<button (click)='bump()'>{{ value() }}</button>"
})
export class RatingComponent {
value = model(0);
bump() { this.value.update(v => v + 1); }
}Comparer les deux approches
La paire classique est explicite et fonctionne partout ; model() est concise et basée sur les signaux. Toutes deux exposent la même liaison [(value)] aux parents.
Plusieurs propriétés bidirectionnelles
Un composant peut exposer plusieurs propriétés compatibles avec la liaison bidirectionnelle, chacune suivant la convention entrée/inputChange.
@Input() min = 0;
@Output() minChange = new EventEmitter<number>();
@Input() max = 100;
@Output() maxChange = new EventEmitter<number>();Choisir une approche
Pour du nouveau code, privilégiez model() pour sa concision et son intégration aux signaux. Utilisez la paire entrée/sortie explicite lorsque vous avez besoin d’un contrôle précis ou que vous n’utilisez pas les signaux.
Vérification rapide
Testez votre compréhension des propriétés personnalisées compatibles avec la liaison bidirectionnelle.
Récapitulatif
Une liaison bidirectionnelle personnalisée nécessite une entrée et une sortie nommée inputChange, émise à chaque mise à jour. Le signal moderne model() crée automatiquement cette paire et constitue le choix concis pour le nouveau code.
Questions Fréquemment Posées
La leçon « Propriétés personnalisées compatibles avec la liaison bidirectionnelle » est-elle gratuite ?
Oui — le texte complet de « Propriétés personnalisées compatibles avec la liaison bidirectionnelle » 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 « Propriétés personnalisées compatibles avec la liaison bidirectionnelle » ?
Exposez vos propres entrées compatibles avec la liaison bidirectionnelle. 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 « Propriétés personnalisées compatibles avec la liaison bidirectionnelle » ?
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