Angular Academy · Leçon

Sorties avec output()

Émettez des événements avec la nouvelle API output.

Sorties avec output() 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.

Sorties fondées sur les signaux

Parallèlement aux entrées signal, la version moderne d’Angular fournit la fonction output() pour déclarer les événements des composants, en remplacement de la combinaison classique @Output et EventEmitter.

Déclarer une sortie

Appelez output() pour créer un événement qu’un composant peut émettre. Fournissez un type générique pour la charge utile.

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

@Component({ selector: "app-counter", template: "" })
export class CounterComponent {
  changed = output<number>();
}

Émettre un événement

Appelez emit sur la sortie pour envoyer une valeur aux écouteurs.

export class CounterComponent {
  changed = output<number>();
  count = 0;
  inc() {
    this.count++;
    this.changed.emit(this.count);
  }
}

Écouter depuis le parent

Le parent s’abonne au moyen d’une liaison d’événement, en utilisant $event pour récupérer la charge utile émise.

<app-counter (changed)="onChange($event)"></app-counter>

// parent
onChange(value: number) {
  this.total = value;
}

Sorties sans charge utile

Pour les événements qui ne transportent aucune donnée, utilisez output<void>() et émettez-les sans argument.

closed = output<void>();

close() {
  this.closed.emit();
}

output et EventEmitter

L’API output() est plus simple et n’est pas liée à RxJS. Vous ne créez pas d’instance d’EventEmitter ; la fonction s’en charge pour vous.

// classic:
@Output() changed = new EventEmitter<number>();

// modern:
changed = output<number>();

Donner un alias à une sortie

Exposez un autre nom d’événement public avec l’option alias.

valueChange = output<number>({ alias: "change" });

<!-- parent listens with the alias -->
<app-counter (change)="onChange($event)"></app-counter>

Sorties et liaison bidirectionnelle

Associer un input à un output nommé xChange permet une liaison bidirectionnelle, même si model() le fait de manière plus concise.

value = input(0);
valueChange = output<number>();
// enables [(value)] on the parent

Dériver des sorties à partir d’observables

L’outil d’interopérabilité outputFromObservable transforme un Observable en sortie, assurant la liaison entre les flux RxJS et la nouvelle API.

import { outputFromObservable } from "@angular/core/rxjs-interop";

clicks = outputFromObservable(this.clicks$);

Sécurité des types

Comme les sorties sont typées, le paramètre du gestionnaire parent est vérifié par rapport au type de la charge utile émise, ce qui permet de détecter les incompatibilités lors de la compilation.

selected = output<{ id: number }>();

<!-- parent must accept { id: number } -->
<app-list (selected)="pick($event)"></app-list>

Quand utiliser output

Privilégiez output() pour les nouveaux composants : cette fonction est plus légère, sûre du point de vue des types et s’associe naturellement aux entrées signal pour modéliser la communication entre composants.

Vérification rapide

Vérifiez votre compréhension de la fonction output.

Récapitulatif

La fonction output() déclare des événements typés sans EventEmitter. Émettez-les avec emit(), écoutez-les via une liaison d’événement et $event, donnez-leur un alias si nécessaire et associez-les aux entrées signal pour assurer une communication claire entre composants.

Questions Fréquemment Posées

La leçon « Sorties avec output() » est-elle gratuite ?

Oui — le texte complet de « Sorties avec output() » 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 « Sorties avec output() » ?

Émettez des événements avec la nouvelle API output. 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 « Sorties avec output() » ?

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