Passer des données du composant enfant au composant parent dans Angular

Dans le monde du développement Angular, la communication entre les composants est une caractéristique clé. En particulier, la transmission de données du composant enfant au composant parent est une opération courante. Or, pour ce faire, Angular nous propose l'annotation @Output().

Comment utiliser @Output()

@Output() est un décorateur qui marque une propriété dans une classe de composant enfant comme une porte de sortie pour les données. Les données peuvent être émises du composant enfant vers le composant parent via un événement customisé. Voyons comment cela fonctionne.

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

export class EnfantComponent {

  @Output() monEvenement = new EventEmitter<any>();

  declencherEvenement() {
    // cela va émettre l'événement et transmettre les données au composant parent
    this.monEvenement.emit('Des données');
  }
}

Dans le composant parent, vous pouvez écouter cet événement et réagir en conséquence.

<app-enfant (monEvenement)="gererEvenement($event)"></app-enfant>

Et dans la classe de votre composant parent :

export class ParentComponent {

  gererEvenement(data: any) {
    console.log('Données reçues du composant enfant:', data);
  }
}

En utilisant @Output() et EventEmitter, nous pouvons facilement et proprement transmettre des données du composant enfant au composant parent.

Insights supplémentaire

Bien que @Output() soit un moyen efficace pour passer des données du composant enfant au composant parent, il convient de noter qu'il doit être utilisé avec parcimonie et uniquement lorsque cela est nécessaire. L'abus de cette méthode peut conduire à des composants fortement couplés et aggraver la complexité de votre application.

Par conséquent, lorsque la logique de votre application commence à devenir trop enchevêtrée, il pourrait être préférable d'envisager d'autres méthodes de gestion des données, comme les services Angular ou les bibliothèques de gestion d'état comme NgRx.