Utiliser @Output pour communiquer avec un composant parent

Voici une structure simple pour comprendre comment communiquer entre un composant enfant et un composant parent:

app
├── count
│   ├── count.component.ts
└── app.component.ts

Dans notre composant, nous souhaitons effectuer un événement. Par exemple, quand l'utilisateur clique sur un bouton, un compteur s'incrémente.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-count',
  standalone: true,
  template: `
    <p>{{n}}</p>
    <button (click)="up()"></button>
  `
})
export class CountComponent {
  n = 0;

  up() {
    this.n++;
  }
}

Nous mettons des parenthèses autour du nom de l'événement pour indiquer une valeur de sortie.

Mais comment envoyer cette valeur à un composant parent, c'est à dire le composant app ?

Nous devons utiliser le décorateur @Output et EventEmitter pour émettre un événement:

import {Component, EventEmitter, Output} from '@angular/core';

@Component({
  selector: 'app-count',
  standalone: true,
  template: `
    <p>{{n}}</p>
    <button (click)="up()">Up</button>
  `
})
export class CountComponent {
  n = 0;
  @Output() numberChange: EventEmitter<number> = new EventEmitter();

  up() {
    this.n++;
    this.numberChange.emit(this.n);
  }
}

Deux importations :

• EventEmitter : Emettre l'événement aux composants parents
• @Output : Décorateur indiquant la propriété envoyant l'information.

Retenir facilement

@Output est utilisé pour envoyer des informations à un composant parent. De cette manière, vous avez accès à un nouvel attribut HTML numberChange dans le template du composant parent. Vous pouvez ensuite écouter les changements de cet attribut car il est un événement.

La propriété numberChange est donc utilisé dans le template pour recevoir l'événement :

import { Component } from '@angular/core';
import { CountComponent } from './count/count.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CountComponent],
  template: `
    <div>
	    <app-count (numberChange)="multiplicate($event)" />
      {{result}}
	  </div>
  `
})
export class AppComponent {
  result = 0;

  multiplicate(val: number) {
    this.result = val * 2;
  }
}

1. Dans le template du composant parent, nous utilisons (numberChange)="multiplicate($event)" pour écouter les changements de la propriété numberChange du composant enfant.
2. Nous utilisons $event pour récupérer la valeur envoyée par le composant enfant.

$event ?

$event est une variable spéciale qui contient la valeur envoyée par le composant enfant. Son type est défini par le type de l'EventEmitter dans le composant enfant.