Angular Academy · Leçon

Entrées de signaux model()

Créez des liaisons bidirectionnelles avec les signaux model.

Entrées de signaux model() est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Les signaux rencontrent la liaison bidirectionnelle

La version moderne d’Angular propose model(), une méthode basée sur les signaux pour créer des entrées compatibles avec la liaison bidirectionnelle sans paires entrée/sortie manuelles.

Déclarer une entrée model

Appelez model() pour créer un signal modifiable auquel un parent peut se lier de manière bidirectionnelle.

import { Component, model } from "@angular/core";

@Component({ selector: "app-toggle", template: "" })
export class ToggleComponent {
  checked = model(false);
}

Lier depuis un parent

Le parent utilise la syntaxe banane dans une boîte avec le nom du modèle, exactement comme avec ngModel.

<app-toggle [(checked)]="isOn"></app-toggle>

// parent
isOn = signal(true);

Lire la valeur d’un modèle

Un modèle est un signal : lisez-le donc en l’appelant comme une fonction.

export class ToggleComponent {
  checked = model(false);
  describe() {
    return this.checked() ? "on" : "off";
  }
}

Écrire dans un modèle

Mettez à jour un modèle avec set ou update. La modification est automatiquement propagée au parent.

toggle() {
  this.checked.update(c => !c);
}

// or
turnOn() {
  this.checked.set(true);
}

Entrées model obligatoires

Utilisez model.required() lorsque le parent doit fournir une valeur.

import { model } from "@angular/core";

export class FieldComponent {
  value = model.required<string>();
}

Utiliser model dans le modèle

Liez directement le signal model dans le propre modèle du composant ; l’appeler renvoie sa valeur actuelle.

@Component({
  selector: "app-toggle",
  template: "<button (click)='flip()'>{{ checked() }}</button>"
})
export class ToggleComponent {
  checked = model(false);
  flip() { this.checked.update(v => !v); }
}

Aucune sortie manuelle nécessaire

Avec model(), vous ne déclarez pas de @Output distinct. Angular configure l’événement de modification pour vous en utilisant le nom conventionnel suivi de Change.

model ou input

Un input() ordinaire est en lecture seule dans le composant, tandis qu’un model() est modifiable et prend en charge la liaison bidirectionnelle avec le parent.

// read-only:
label = input("");

// two-way writable:
value = model("");

Un compteur avec model

Voici un compteur autonome dont la valeur reste synchronisée avec le parent.

@Component({
  selector: "app-counter",
  template: "<button (click)='inc()'>{{ count() }}</button>"
})
export class CounterComponent {
  count = model(0);
  inc() { this.count.update(c => c + 1); }
}

Quand utiliser model

Utilisez model() lorsqu’un composant enfant possède une valeur que le parent souhaite également lire et modifier, comme pour des contrôles de formulaire personnalisés, des boutons bascule et des curseurs.

Vérification rapide

Testez votre compréhension des entrées de signaux model.

Récapitulatif

La fonction model() crée un signal modifiable qui prend en charge la liaison bidirectionnelle sans paire entrée/sortie manuelle. Lisez-le en l’appelant, écrivez-y avec set ou update, et liez-le depuis le parent avec [(name)].

Questions Fréquemment Posées

La leçon « Entrées de signaux model() » est-elle gratuite ?

Oui — le texte complet de « Entrées de signaux model() » 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 « Entrées de signaux model() » ?

Créez des liaisons bidirectionnelles avec les signaux model. 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 3 sur 4.

Combien de temps prend la leçon « Entrées de signaux model() » ?

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

← Retour à Angular Academy