Comment utiliser le décorateur de sortie dans Angular

Dans Angular, une page Web peut contenir de nombreux composants réutilisables différents. Chaque composant contient généralement sa propre logique TypeScript, son modèle HTML et son style CSS.

Vous pouvez également réutiliser des composants à l’intérieur d’autres composants. Dans ce cas, vous pouvez utiliser le décorateur Output pour renvoyer les informations d’un composant enfant à son composant parent.

Vous pouvez également utiliser le décorateur de sortie pour écouter les événements qui se produisent dans le composant enfant.

Comment ajouter le décorateur de sortie à un composant enfant

Tout d’abord, vous devrez créer une nouvelle application angulaire avec un composant parent et un composant enfant.

Une fois que vous avez un composant parent et un composant enfant, vous pouvez utiliser le décorateur de sortie pour transférer des données et écouter des événements entre les deux composants.

1. Créez une nouvelle application angulaire. Par défaut, « app » est le nom du composant racine. Ce composant comprend trois fichiers principaux : « app.component.html », « app.component.css » et « app.component.ts ».
2. Pour cet exemple, le composant « app » agira en tant que composant parent. Remplacez tout le contenu de « app.component.html » par ce qui suit : <div class="parent-component">
  <h1> This is the parent component </h1>
</div>
3. Ajoutez du style au composant d’application parent dans « app.component.css »: .parent-component {
  font-family: Arial, Helvetica, sans-serif;
  background-color: lightcoral;
  padding: 20px
}
4. Utilisez la commande « ng generate component » pour créer un nouveau composant angulaire appelé « data-component ». Dans cet exemple, « data-component » représentera le composant enfant. ng g c data-component
5. Ajoutez du contenu au composant enfant dans « data-component.component.html ». Remplacez le contenu actuel pour ajouter un nouveau bouton. Associez le bouton à une fonction qui s’exécutera lorsque l’utilisateur cliquera dessus : <div class="child-component">
  <p> This is the child component </p>
  <button (click)="onButtonClick()">Click me</button>
</div>
6. Ajoutez du style au composant enfant dans « data-component.component.css »: .child-component {
  font-family: Arial, Helvetica, sans-serif;
  background-color: lightblue;
  margin: 20px;
  padding: 20px
}
7. Ajoutez la fonction onButtonClick() au fichier TypeScript du composant, dans « data-component.component.ts »: onButtonClick() {
}
8. Toujours dans le fichier TypeScript, ajoutez « Output » et « EventEmitter » à la liste des importations : import { Component, Output, EventEmitter, OnInit } from '@angular/core';
9. Dans la classe DataComponentComponent, déclarez une variable de sortie pour le composant appelé « buttonWasClicked ». Ce sera un EventEmitter. Un EventEmitter est une classe intégrée qui vous permet d’informer un autre composant lorsqu’un événement se produit. export class DataComponentComponent implements OnInit {
  @Output() buttonWasClicked = new EventEmitter<void>();
  //. ..
}
10. Utilisez l’émetteur d’événement « buttonWasClicked » à l’intérieur de la fonction onButtonClick(). Lorsque l’utilisateur clique sur le bouton, le composant de données enverra cet événement au composant d’application parent. onButtonClick() {
    this.buttonWasClicked.emit();
}

Comment écouter les événements du composant enfant à partir du composant parent

Pour utiliser la propriété Output du composant enfant, vous devez écouter l’événement émis par le composant parent.

1. Utilisez le composant enfant dans « app.component.html ». Vous pouvez ajouter la sortie « buttonWasClicked » en tant que propriété lors de la création de la balise HTML. Liez l’événement à une nouvelle fonction. <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked()"></app-data-component>
2. Dans « app.component.ts », ajoutez la nouvelle fonction pour gérer l’événement de clic de bouton lorsqu’il se produit dans le composant enfant. Créer un message lorsque l’utilisateur clique sur le bouton. message: string = ""


   buttonInChildComponentWasClicked() {
    this.message = 'The button in the child component was clicked';
}

3. Affichez le message dans « app.component.html »: <p>{{message}}</p>
4. Tapez la commande « ng serve » dans un terminal pour exécuter votre application Angular. Ouvrez-le dans un navigateur Web à localhost:4200. Les composants parent et enfant utilisent des couleurs d’arrière-plan différentes pour faciliter leur distinction.
   
5. Cliquez sur le bouton Cliquez-moi . Le composant enfant enverra l’événement au composant parent, qui affichera le message.
   

Comment envoyer des données d’un composant enfant à un composant parent

Vous pouvez également envoyer des données du composant enfant au composant parent.

1. Dans « data-component.component.ts », ajoutez une variable pour stocker une liste de chaînes contenant des données. listOfPeople: string[] = ['Joey', 'John', 'James'];
2. Modifiez le type de retour de l’émetteur de l’événement buttonWasClicked. Changez-le de void en string[], pour qu’il corresponde à la liste de chaînes que vous avez déclarée à l’étape précédente : @Output() buttonWasClicked = new EventEmitter<string[]>();
3. Modifiez la fonction onButtonClick(). Lors de l’envoi de l’événement au composant parent, ajoutez les données en tant qu’argument dans la fonction emission() : onButtonClick() {
    this.buttonWasClicked.emit(this.listOfPeople);
}
4. Dans « app.component.html », modifiez la balise « app-data-component ». Ajoutez le « $ événement » dans la fonction buttonInChildComponentWasClicked(). Celui-ci contient les données envoyées par le composant enfant. <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked($event)"></app-data-component>
5. Mettez à jour la fonction dans « app.component.ts » pour ajouter le paramètre pour les données : buttonInChildComponentWasClicked(dataFromChild: string[]) {
    this.message = 'The button in the child component was clicked';
}
6. Ajoutez une nouvelle variable appelée « data » pour stocker les données provenant du composant enfant : message: string = ""
data: string[] = []


   buttonInChildComponentWasClicked(dataFromChild: string[]) {
    this.message = 'The button in the child component was clicked';
    this.data = dataFromChild;
}

7. Affichez les données sur la page HTML : <p>{{data.join(', ')}}</p>
8. Tapez la commande « ng serve » dans un terminal pour exécuter votre application Angular. Ouvrez-le dans un navigateur Web à localhost:4200.
   
9. Cliquez sur le bouton Cliquez-moi . Le composant enfant enverra les données du composant enfant au composant parent.
   

Envoi de données à d’autres composants à l’aide du décorateur de sortie

Il existe d’autres décorateurs que vous pouvez utiliser dans Angular, tels que le décorateur Input ou le décorateur Component. Vous pouvez en savoir plus sur la façon dont vous pouvez utiliser d’autres décorateurs dans Angular pour simplifier votre code.