How to use output decorators in Angular

Use this simple technique to send data between Angular components.

Angular allows web pages to contain a variety of reusable components. Each component typically has its own TypeScript logic, HTML templates, and CSS styles.

Components can also be reused within other components. In this case, you can use output decorators to send information from the child component to the parent component.

You can also use output decorators to listen to events fired by child components.

How to add output decorator to child component

First, we need to create a new Angular app with a parent and child component.

After creating the parent and child components, you can use the Output decorator to transfer data and listen to events between the two components.

1. Create a new Angular application. By default, “app” is the name of the root component. This component contains three main files: ‘app.component.html’, ‘app.component.css’ and ‘app.component.ts’.
2. In this example, the “app” component acts as the parent component. Replace all content of “app.component.html” with:

    <div class="parent-component">
     <h1> This is the parent component </h1>
   </div> 

3. Add styles to the parent app component in ‘app.component.css’.

    .parent-component {
     font-family: Arial, Helvetica, sans-serif;
     background-color: lightcoral;
     padding: 20px
   } 

4. Create a new Angular component called ‘data-component’ using the ‘ng generate component’ command. In this example, “data-component” represents the child component.

    ng g c data-component 

5. Add content to the child component of “data-component.component.html”. Adds a new button, replacing the current content. Bind the button to a function that runs when the user clicks the button.

    <div class="child-component">
     <p> This is the child component </p>
     <button (click)="onButtonClick()">Click me</button>
   </div> 

6. Add styles to child components of “data-component.component.css”.

    .child-component {
     font-family: Arial, Helvetica, sans-serif;
     background-color: lightblue;
     margin: 20px;
     padding: 20px
   } 

7. Add the onButtonClick() function to the component’s TypeScript file in “data-component.component.ts”.

    onButtonClick() {
   } 

8. Inside the TypeScript file, add “Output” and “EventEmitter” to the imports list.

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

9. Within the DataComponentComponent class, declare a component output variable called “buttonWasClicked”. This will be the EventEmitter. EventEmitter is a built-in class that can notify another component when an event occurs.

    export class DataComponentComponent implements OnInit {
     @Output() buttonWasClicked = new EventEmitter<void>();
     
   } 

10. Use the “buttonWasClicked” event emitter inside the onButtonClick() function. When the user clicks the button, the data component sends this event to the parent app component.

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

How to listen to child component events from parent component

To use the child component’s Output property, you need to listen to the events emitted by the parent component.

1. Use a child component inside “app.component.html”. You can add the “buttonWasClicked” output as a property when creating the HTML tag. Bind the event to a new function.

    <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked()"></app-data-component> 

2. Inside “app.component.ts” add a new function to handle the button click event fired in the child component. Create a message when the user clicks the button.

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

3. Display a message in “app.component.html”.

    <p>{{message}}</p> 

4. Run the Angular application by typing the ‘ng serve’ command into the terminal. Open it in your web browser at localhost:4200. Parent and child components use different background colors for easy distinction.

   

5. please click please click button. Child components send events to parent components that display messages.

   

How to send data from child component to parent component

You can also send data from child component to parent component.

1. In “data-component.component.ts” add a variable to store a list of strings containing data.

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

2. Change the return type of the buttonWasClicked event emitter. change from void to string[]to match the list of strings declared in the previous step.

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

3. Change the onButtonClick() function. When sending an event to a parent component, add the data as an argument to the emit() function.

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

4. In “app.component.html”, modify the “app-data-component” tag. Add “$event” to the buttonInChildComponentWasClicked() function. This includes data sent from child components.

    <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked($event)"></app-data-component> 

5. Update the function in “app.component.ts” to add parameters for data.

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

6. Add a new variable called “data” to store the data from the child component.

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

7. Display data on an HTML page.

    <p>{{data.join("https://news.google.com/__i/rss/rd/articles/,")}}</p> 

8. Run the Angular application by typing the ‘ng serve’ command into the terminal. Open it in your web browser at localhost:4200.

   

9. please click please click button. A child component sends data from the child component to the parent component.

   

Send data to other components using output decorators

There are other decorators available in Angular, such as the Input decorator and the Component decorator. You can learn more about using other decorators in Angular to simplify your code.