Angular
Communication

Le décorateur @Output()

Si @Input() permet aux parents de parler aux enfants, @Output() est le mégaphone qui permet aux enfants de crier une information pour que les parents l'entendent !

Le Parent (L'Écouteur)
Test7Component écoute les événements de l'enfant.
Message reçu en direct (Clavier)
En attente de frappe...
Message du Bouton
En attente d'un clic...

Transmission via (événement)

Composant Enfant
Il tape et clique pour envoyer au parent

Comment fonctionne le Mégaphone ?

1
L'enfant crée l'événement

Il utilise EventEmitter pour créer un canal de sortie.

@Output() dataSent = new EventEmitter();
2
L'enfant émet (Crie)

Lors d'un clic, il utilise la méthode emit() pour propulser la donnée.

this.dataSent.emit('Coucou');
3
Le Parent écoute

Le parent place ses oreilles ( ) autour de l'événement et récupère $event.

<enfant (dataSent)="save($event)">

Le Code Source Complet

import { Component } from '@angular/core';
import { EnfantComponent } from './enfant.component';

@Component({
  selector: 'app-parent',
  imports: [EnfantComponent],
  template: `
    <h3>Je suis le Parent, j'écoute l'enfant !</h3>
    
    <!-- (evenement)="fonctionDuParent($event)" -->
    <app-enfant 
      (dataSent)="receiveData($event)"
      (message)="receiveMessage($event)"
    ></app-enfant>

    <p>Il m'a dit : {{ mess }}</p>
  `
})
export class ParentComponent {
  message = "";
  mess = "";

  receiveData(data: string) {
    this.mess = data; // Récupère le texte du bouton
  }
  
  receiveMessage(data: string) {
    this.message = data; // Récupère le texte de l'input en direct
  }
}
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-enfant',
  template: `
    <input (input)="handleChange($event)" placeholder="Frappe...">
    <button (click)="sendMessage()">Envoyer clic</button>
  `
})
export class EnfantComponent {
  // Les Mégaphones
  @Output() dataSent = new EventEmitter<string>();
  @Output() message = new EventEmitter<string>();

  sendMessage() {
    // J'émet (je crie) la donnée vers le haut
    this.dataSent.emit('Coucou Papa !');
  }

  handleChange(event: Event) {
    const target = event.target as HTMLInputElement;
    this.message.emit(target.value);
  }
}