📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structurĂ© en trois niveaux : dĂ©butant, intermĂ©diaire et avancĂ©
  • 3) traite des pratiques les plus rĂ©centes d'Angular, comme les signaux, les vues diffĂ©rĂ©es, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

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.

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !