Angular Academy · Leçon

Entrées de signaux avec input()

Déclarez des entrées réactives sous forme de signaux.

Entrées de signaux avec input() 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.

Entrées fondées sur les signaux

La version moderne d’Angular fournit la fonction input() pour déclarer les entrées des composants sous forme de signaux, en remplacement du décorateur classique @Input par une solution réactive.

Déclarer une entrée signal

Appelez input() avec une valeur par défaut facultative. Le résultat est un signal en lecture seule.

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

@Component({ selector: "app-greet", template: "" })
export class GreetComponent {
  name = input("World");
}

Lire l’entrée

Une entrée signal se lit en l’appelant comme une fonction, aussi bien dans le code que dans les modèles.

@Component({
  selector: "app-greet",
  template: "<p>Hello, {{ name() }}</p>"
})
export class GreetComponent {
  name = input("World");
}

Liaison depuis le parent

Le parent lie une entrée signal exactement comme une entrée classique, au moyen d’une liaison de propriété.

<app-greet [name]="userName"></app-greet>

// parent
userName = "Ada";

Les entrées sont en lecture seule

Un simple input() est en lecture seule à l’intérieur du composant. Vous ne pouvez pas appeler set dessus ; seul le parent peut modifier sa valeur.

// this is NOT allowed:
// this.name.set("x");
// inputs are read-only signals

Typage des entrées

Fournissez un type générique pour garantir la sécurité des types, en particulier lorsqu’il n’existe aucune valeur par défaut à utiliser pour l’inférence.

age = input<number>();
label = input<string>("Untitled");

Entrées dans les valeurs calculées

Comme les entrées sont des signaux, elles s’intègrent à computed pour créer un état dérivé qui se met automatiquement à jour.

import { input, computed } from "@angular/core";

first = input("");
last = input("");
fullName = computed(() => this.first() + " " + this.last());

Entrées avec effect

Vous pouvez réagir aux changements d’une entrée avec effect, qui s’exécute à nouveau chaque fois qu’un signal lu change.

constructor() {
  effect(() => {
    console.log("name is", this.name());
  });
}

Plus besoin de ngOnChanges

Avec les entrées signal, vous n’avez souvent plus besoin de ngOnChanges ; computed et effect réagissent aux changements à votre place.

Donner un alias à une entrée

Vous pouvez exposer un autre nom de liaison public avec l’option alias.

value = input(0, { alias: "count" });

<!-- parent binds with the alias -->
<app-counter [count]="total"></app-counter>

Pourquoi utiliser les entrées signal ?

Les entrées signal sont réactives, sûres du point de vue des types et se composent proprement avec computed et effect, ce qui réduit le code répétitif par rapport à l’approche combinant décorateur et cycle de vie.

Vérification rapide

Vérifiez votre compréhension des entrées signal.

Récapitulatif

La fonction input() déclare des entrées signal réactives et en lecture seule. Lisez-les en les appelant, indiquez leur type avec des génériques, donnez-leur un alias si nécessaire et combinez-les avec computed et effect plutôt qu’avec ngOnChanges.

Questions Fréquemment Posées

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

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

Déclarez des entrées réactives sous forme de signaux. 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 « Entrées de signaux avec input() » ?

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