You can also reuse components inside other components. In this case, you can use the Output decorator to send information from a child component back to its parent component.

You can also use the Output decorator to listen to events that occur in the child component.

How to Add the Output Decorator to a Child Component

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

Once you have a parent and child component, you can use the Output decorator to transfer data and listen to events between the two components.

Create a new Angular application. By default, “app” is the name of the root component. This component includes three main files: “app. component. html”, “app. component. css”, and “app. component. ts”. For this example, the “app” component will act as the parent component. Replace all the content in “app. component. html” with the following:

  

This is the parent component

Add some styling to the parent app component in “app. component. css”: . parent-component {  font-family: Arial, Helvetica, sans-serif;  background-color: lightcoral;  padding: 20px} Use the “ng generate component” command to create a new Angular component called “data-component”. In this example, “data-component” will represent the child component. ng g c data-component Add content to the child component in “data-component. component. html”. Replace the current content to add a new button. Bind the button to a function that will run when the user clicks on it:
  

This is the child component

  <button (click)=“onButtonClick()">Click me
Add some styling to the child component in “data-component. component. css”: . child-component {  font-family: Arial, Helvetica, sans-serif;  background-color: lightblue;  margin: 20px;  padding: 20px} Add the onButtonClick() function to the TypeScript file for the component, in “data-component. component. ts”: onButtonClick() {} Still inside the TypeScript file, add “Output” and “EventEmitter” to the imports list: import { Component, Output, EventEmitter, OnInit } from ‘@angular/core’; Inside the DataComponentComponent class, declare an Output variable for the component called “buttonWasClicked”. This will be an EventEmitter. An EventEmitter is a built-in class that allows you to inform another component when an event happens. export class DataComponentComponent implements OnInit {  @Output() buttonWasClicked = new EventEmitter();  // . . . } Use the “buttonWasClicked” event emitter inside the onButtonClick() function. When the user clicks on the button, the data-component will send this event to the parent app component. onButtonClick() {    this. buttonWasClicked. emit();}

How to Listen to Events in the Child Component From the Parent Component

To use the child component’s Output property, you will need to listen to the emitted event from the parent component.

Use the 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()"> Inside “app. component. ts”, add the new function to handle the button click event when it occurs in the child component. Create a message when the user clicks on the button. message: string = ““buttonInChildComponentWasClicked() {    this. message = ‘The button in the child component was clicked’;} Display the message in “app. component. html”:

{{message}}

Type the “ng serve” command into a terminal to run your Angular application. Open it in a web browser at localhost:4200. The parent and child components use different background colors to make it easier to distinguish between them. Click on the Click me button. The child component will send the event to the parent component, which will display the message.

How to Send Data From a Child Component to a Parent Component

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

In “data-component. component. ts”, add a variable to store a list of strings containing some data. listOfPeople: string[] = [‘Joey’, ‘John’, ‘James’]; Modify the return type of the buttonWasClicked event emitter. Change it from void to string[], to match the list of strings you declared in the previous step: @Output() buttonWasClicked = new EventEmitter<string[]>(); Modify the onButtonClick() function. When sending the event to the parent component, add the data as an argument into the emit() function: onButtonClick() {    this. buttonWasClicked. emit(this. listOfPeople);} In “app. component. html”, modify the “app-data-component” tag. Add the “$event” into the buttonInChildComponentWasClicked() function. This contains the data sent from the child component. <app-data-component (buttonWasClicked)=“buttonInChildComponentWasClicked($event)"> Update the function in “app. component. ts” to add the parameter for the data: buttonInChildComponentWasClicked(dataFromChild: string[]) {    this. message = ‘The button in the child component was clicked’;} Add a new variable called “data” to store the data coming from the child component: message: string = ““data: string[] = []buttonInChildComponentWasClicked(dataFromChild: string[]) {    this. message = ‘The button in the child component was clicked’;    this. data = dataFromChild;} Display the data on the HTML page:

{{data. join(’, ‘)}}

Type the “ng serve” command into a terminal to run your Angular application. Open it in a web browser at localhost:4200. Click on the Click me button. The child component will send the data from the child component to the parent component.

Sending Data to Other Components Using the Output Decorator

There are other decorators you can use in Angular, such as the Input decorator or the Component decorator. You can learn more about how you can use other decorators in Angular to simplify your code.