Comment utiliser l’émetteur d’événements avec des exemples

Apprenez à utiliser Angular EventEmitter, un outil puissant qui permet aux composants de communiquer entre eux. Et voir des exemples pratiques avec des émetteurs d’événements.

Bienvenue sur notre blog sur l’utilisation de EventEmitter dans Angular. Dans cet article, nous fournirons un guide complet sur la façon d’utiliser EventEmitter dans Angular avec des exemples. EventEmitter est un outil puissant qui permet aux composants de communiquer entre eux, et il joue un rôle crucial dans la gestion de la communication et de l’état au sein d’une application Angular.

Nous explorerons les bases d’EventEmitter et son fonctionnement, puis passerons à des exemples pratiques qui montrent comment il peut être implémenté dans différents scénarios. Que vous soyez nouveau sur Angular ou un développeur expérimenté cherchant à améliorer vos compétences, cet article fournira des informations précieuses et des conseils pratiques sur la façon d’utiliser efficacement EventEmitter. Alors, plongeons et découvrons EventEmitter dans Angular!

Qu’est-ce qu’un EventEmitter ?

EventEmitter dans Angular est utilisé pour la communication entre les composants. Les événements personnalisés sont émis d’un composant enfant vers son composant parent via l’utilisation d’EventEmitter. Par exemple, lorsqu’un bouton sur un composant enfant est cliqué, le composant enfant utilise un EventEmitter pour informer le composant parent du clic sur le bouton.

Vous pouvez l’implémenter avec l’utilisation du @Sortir() décorateur et la classe EventEmitter. L’événement émis peut être écouté par le composant parent grâce à l’utilisation du @Saisir() décorateur. L’envoi d’un événement se fait via la méthode EventEmitter.emit().

L’émetteur d’événements joue un rôle essentiel dans la gestion de la communication et de l’état dans les applications angulaires. Grâce à leur utilisation, différents composants sont capables de travailler ensemble et de répondre aux interactions de l’utilisateur, aux mises à jour des données et à d’autres événements qui se produisent au sein de l’application.

Le format d’utilisation de l’émetteur d’événements dans Angular

Pour se connecter à un événement DOM, nous devons placer le nom de l’événement DOM entre parenthèses et lui attacher une expression de modèle entre guillemets. L’utilisation de parenthèses (nom d’événement) signifie la liaison d’événement. Il existe de nombreux événements prédéfinis tels que le clic, la touche enfoncée, la saisie, etc. qui sont disponibles dans Angular. De plus, le @Output() decorator et un émetteur d’événement angulaire doit être ajouté au composant enfant.

@Output() eventName = new EventEmitter<Type>();

Dans le composant parent, nous écoutons les événements enfants comme suit.

<child-component (eventName)="someMethod($event)"></child-component>

En utilisant des crochets entre parenthèses, Angular est informé qu’une liaison d’événement est en cours d’établissement, ce qui est un moyen d’implémenter une liaison unidirectionnelle. En émettant des événements, un composant enfant peut transmettre des données à son parent, sans que le composant enfant ait besoin de connaître l’identité du parent.

Remarque : Il est essentiel de garder à l’esprit que lors de l’utilisation du décorateur de sortie et de l’émetteur d’événements angulaires dans les composants enfant et parent, le nom de l’événement doit être le même nom, et c’est votre choix du nom de l’événement personnalisé. De plus, someMethod est une méthode qui est invoquée lorsque le composant parent reçoit un événement du composant enfant.

Utilisation du décorateur de sortie angulaire pour transmettre des données du composant enfant au composant parent

Dans Angular, les composants enfants peuvent communiquer avec les composants parents à l’aide d’émetteurs d’événements. De cette façon, lorsque quelque chose se produit sur le composant enfant, comme un clic sur un bouton, il peut envoyer un message au composant parent pour le lui faire savoir. Le composant parent doit disposer d’un code capable d’écouter et de répondre à ces messages. Ceci est connu sous le nom d' »événements » et doit découler des composants de niveau inférieur tels que les composants enfants vers les composants de niveau supérieur tels que les composants parents.

De plus, les émetteurs d’événements peuvent également être utilisés pour transmettre des données du composant enfant au composant parent. De cette façon, le composant parent peut utiliser les données pour mettre à jour son propre état ou effectuer d’autres actions.

Utilisation de l’EventEmitter avec l’exemple

Transmettre les données de l’enfant au parent

Avant d’utiliser l’émetteur d’événements, créons d’abord un projet angulaire simple. Tout d’abord, utilisez la commande suivante dans votre invite de commande pour installer Angular.

npm install -g @angular/cli

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Créons maintenant le nouveau projet à l’aide de la commande suivante :

ng new <name-of-the-project>

Pour exécuter l’application à l’aide de la commande suivante :

cd <name-of-the-project>
ng serve --open

C’est fait, et votre application devrait s’ouvrir automatiquement dans le navigateur.

Maintenant, pour cet exemple, nous allons utiliser un projet de panier d’achat. Si vous le souhaitez, vous pouvez l’utiliser dans votre propre projet.

Donc, la première chose que nous devons faire est de créer des articles afin de pouvoir les ajouter au panier. Pour cela ajoutez le code suivant dans le fichier :

<counter [val]="2" [name]="'Burger'"></counter>
<counter [val]="0" [name]="'Pizza'"></counter>

Nous devons maintenant créer un fichier nommé counter.component.ts et informer le composant ci-dessus que les données ont changé.

Pour cela nous devons utiliser Output annotation avec la fonctionnalité EventEmitter. Maintenant, nous devons créer une sortie. Cette sortie peut être connectée à n’importe quel composant parent, qui doit être un émetteur d’événements. Il peut être de n’importe quel type, mais ici nous utilisons un nombre X car il comptera le nombre.

Pour incrémenter le nombre, nous pouvons utiliser le code suivant. Ici, nous émettons les données.

inc() {
    this.changed.emit(this.val + 1)
  }

Désormais, nous ne modifions plus le val propriété. Au lieu de cela, la valeur réelle de la propriété changera dans le composant parent afin que le composant parent ait les données les plus récentes et les plus récentes.

De même, pour la décrémentation, nous pouvons utiliser le code suivant mais rappelez-vous que les éléments ne peuvent pas être négatifs.

dec() {
    this.changed.emit(this.val - 1 < 0 ? 0 : this.val - 1)
  }

Voici le code complet que vous devez coller dans le counter.component.ts :

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

@Component({
  selector: 'counter',
  template: `
    <div>
      {{name}}
      <button (click)="dec()">-</button>
      {{val}}
      <button (click)="inc()">+</button>
    </div>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class CounterComponent  {
  @Input() name: string;
  @Input() val: number;
  @Output() changed = new EventEmitter<number>()

  inc() {
    this.changed.emit(this.val + 1)
  }

  dec() {
    this.changed.emit(this.val - 1 < 0 ? 0 : this.val - 1)
  }
}

Maintenant, le composant parent doit avoir quelque chose pour écouter cela, alors revenons en arrière et éditons le modèle de composant parent (app.component.html).

Ici, nous écoutons l’événement modifié et lui attribuons des gestionnaires d’événements. Et nous devons également ajouter la section des articles totaux.

<counter [val]="Burgers" [name]="'Burger'" (changed)="burgersChanged($event)"></counter>
<counter [val]="Pizzas" [name]="'Pizza'" (changed)="pizzasChanged($event)"></counter>

<b>
    total items: {{totalItems}}
</b>

Créons maintenant ces propriétés dans notre app.component.ts et nous devons également créer deux gestionnaires d’événements pour chaque élément. De cette façon, nous pouvons récupérer l’événement et la valeur, puis nous pouvons mettre à jour ces valeurs dans notre composant parent.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  burgers = 0
  pizzas = 0
  totalItems;

  constructor() {
    this.calculateTotalItems()
  }

  burgersChanged(count: number){
    this.burgers = count;
    this.calculateTotalItems()
  }

  pizzasChanged(count: number){
    this.pizzas = count;
    this.calculateTotalItems()
  }

  calculateTotalItems(){
    this.totalItems = this.burgers + this.pizzas;
  }
}

Alors maintenant, notre composant enfant ne contient plus le nombre d’événements – il ne fait que transmettre l’événement au parent, puis le parent contient la valeur réelle d’un élément particulier.

Derniers mots

En bref, l’Event Emitter est une fonctionnalité pratique d’Angular qui permet aux composants de communiquer entre eux. En fournissant des exemples, nous avons démontré comment il peut être utilisé pour transférer des données d’un composant enfant vers un composant parent ou pour initier une action spécifique. Se familiariser avec l’Event Emitter peut améliorer les performances et l’organisation de votre application Angular.