[Vidéo] Utilisez les signaux, c'est le futur d'Angular !

Dans cette vidéo de 3 minute, découvrez pourquoi les signaux sont essentiels pour l'avenir du développement web et apprenez les 3 fonctions: signal / computed / effect

Skip to content

Utiliser @Output pour communiquer avec un composant parent

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

plaintext
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.

ts
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:

ts
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 :

ts
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.

En août, Recevez des nouvelles libraries Angular 🌟 qui peuvent vous être utiles pour booster vos projets. Inscrivez-vous maintenant et découvrez les dernières tendances et outils Angular directement dans votre boîte mail !