Comment utiliser le décorateur de sortie dans Angular

En Angular, une page Web peut contenir de nombreux composants réutilisables différents. Chaque composant contient généralement sa propre logique TypeScript, son propre modèle HTML et son propre 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 des informations d’un composant enfant à son composant parent.

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

Comment ajouter le décorateur Output à un composant enfant ?

Tout d’abord, vous devez créer une nouvelle application Angular 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 Output pour transférer des données et écouter les événements entre les deux composants.

1. Créez une nouvelle application Angular. 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 » fera office de 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 un peu de style au composant parent « app » 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 Angular 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. Liez le bouton à une fonction qui sera exécutée 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ée « buttonWasClicked ». Il s’agira d’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énements « buttonWasClicked » dans la fonction onButtonClick(). Lorsque l’utilisateur clique sur le bouton, le composant de données envoie 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 » comme 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 du bouton lorsqu’il se produit dans le composant enfant. Créez 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-la dans un navigateur Web à l’adresse localhost:4200. Les composants parent et enfant utilisent des couleurs d’arrière-plan différentes pour faciliter leur distinction.

   

5. Cliquez sur l’icône Cliquez sur moi bouton. 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 de caractères contenant des données.

    listOfPeople: string[] = ['Joey', 'John', 'James']; 

2. Modifiez le type de retour de l’émetteur d’événement buttonWasClicked. Passez de void à string[]pour qu’il corresponde à la liste des chaînes de caractères que vous avez déclarées à l’étape précédente :

    @Output() buttonWasClicked = new EventEmitter<string[]>(); 

3. Modifiez la fonction onButtonClick(). Lorsque vous envoyez l’événement au composant parent, ajoutez les données comme argument dans la fonction emit() :

    onButtonClick() {
       this.buttonWasClicked.emit(this.listOfPeople);
   } 

4. Dans « app.component.html », modifiez la balise « app-data-component ». Ajoutez « $event » dans la fonction buttonInChildComponentWasClicked(). Ceci 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("https://www.makeuseof.com/angular-output-decorator-how-use/,")}}</p> 

8. Tapez la commande « ng serve » dans un terminal pour exécuter votre application Angular. Ouvrez-la dans un navigateur Web à l’adresse localhost:4200.

   

9. Cliquez sur l’icône Cliquez sur moi bouton. 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.