Input and Output Decorators in Angular 2+

This article describes how to send data from one component to other with the help of “@Input” and “@Output” decorators. These decorators are used to communicate between Child and Parent components or directives. With the help of this simple example in the article you will get a basic idea about Parent-Child communication in Angular and then you can switch to complex examples.

// Before moving to the example, lets get a rough idea about the following terms that are common while working with Input and Output. //

• Decorator- Defines what kind of class, parameter, method or property it is. Always represented by “@” symbol. It is also called Data-Annotation or Meta-data which gives more information about the class,parameter, method or property.
• @Input — A Decorator used to send data from Parent component to Child component.
• @Output- A Decorator used to send data from Child Component to Parent component.
• EventEmitter- Helps to send data out of the component as an event.
• Template Reference Variable- Special variables to reference a DOM element within a template.

Lets begin to Code -

Step 1

1. First start by creating an Angular Project (assuming you have installed Angular CLI).
2. Go to the directory in which you want to create project.
3. Enter the command ng new InputOutput (filename can be anything you wish) then press enter.
4. Angular will then ask you about routing, press N as we are not using routing in this project.
5. Then it will prompt about which type of Stylesheet format to be used, select CSS and press enter.

create a project named as “InputOutput”

Step 2

1. After creating the project, rename the following in src/app folder -

“app.component.ts” => “child.component.ts”

“app.module.ts” => “inputoutput.module.ts”

“app.component.html” => “child.html”

Step 3

1. In the “child.component.ts”, rename the component as“ ChildComponent” and in the templateUrl property change the value to ‘./child.html’.
2. Remove the styleUrls property as it is no longer needed.
3. Also change the selector value ‘app-root’ to ‘child-root’.

Step 4

1. Copy the “child.component.ts” and “child.html” and paste them in the same app folder and rename it to “parent.component.ts” and “parent.html”.
2. The folder structure should look like this:-

folder/file/structure

Step 5

1. In the “parent.component.ts”, rename the component as “ParentComponent” and in the templateUrl property change the value to “./parent.html”.
2. Remove the styleUrls property.

Step 6

1. In the “inputoutput.module.ts” , import both the component i.e. “ChildComponent” and “ParentComponent” and add it to the declarations property of the “@NgModule” and change the module name to “InputOutputModule”.
2. Also change bootstrap value to “ParentComponent”.

Step 7

1. Go to the main.ts file,
2. Import “InputOutputModule” from ‘./inputoutput.module.ts’ and change the “AppModule” to “InputOutputModule”

Step 8

1. In the “ChildComponent”,
2. Import “Input” from ‘@angular/core’ and use the “@Input” decorator beside “item” property.
3. Now this “item” is the property which will receive the input value as a string type from the parent.

Step 9

1. In the “child.html”, we will bind the “item” using interpolation/expression {{}}.

Step 10

1. In the “ParentComponent”, create a “parentItem” property having “Computer” value as a string type.
2. This “parentItem” value will be sent to the “ChildComponent”.

Step 11

1. In the “parent.html”, use custom tag having name as the selector of “ChildComponent” which is <child-root>.
2. Use property binding [ ] to bind the property in the child to the property of the parent.
3. [item] is a ChildComponent property binded with “parentItem” property of the “ParentComponent”.
4. Due to this binding, the property value of “ParentComponent” i.e. “Computer” will flow from “ParentComponent” to the “ChildComponent”.

Step 12

1. Fire “ng serve” in the Integrated Terminal .
2. The following will be the output

Now for using Output we will import Output and EventEmitter from ‘@angular/core’.

Remember that @Output and EventEmitter are mostly used together. EventEmiiter is used to emit the event from Child to the Parent.

In this example we will be using <input> where a user can enter a value and click a <button> that raises an event.

Step 13

1. In the “ChildComponent” import “Output” and “EventEmitter” from ‘@angular/core’.

2. The different parts of the declaration are as follows:

• @Output() - A decorator function marking the property as a way for data to go from the child to the parent.
• sendToParent- the name of the @Output().
• EventEmitter<string>- the @Output()’s type.
• new EventEmitter<string>()- tells Angular to create a new event emitter and that the data it emits is of type string. The type could be any type, such as number, boolean, and so on.

Step 14

1. Now create “addItem()” method which takes value from child “<input>” and emits the value to the parent.
2. In other words, when the user clicks the “Send” button in the Child View, the child lets the parent know about the event and gives that data to the parent.

Step 15

1. Now in the “child.html”,
2. “#newItem” is the template reference variable which is used to reference the input text element.
3. When the user clicks “Send” the value of “#newItem” will be given as a parameter to the addItem() method.

Step 16

1. In the “Parent.component”,
2. Create an array of “items” in which the received value/item from the “ChildComponent” will be pushed in it.
3. Then create a “receivedItem()” method having a parameter value as string which will be pushed into the “items” array.

Step 17

1. In “parent.html”,
2. Use “sendToParent” of “ChildComponent” and bind that to the “receivedItem()” method of “ParentComponent”.
3. Due to this binding, “sendToParent” emits the value from child view input element to the parent havingthe “receivedItem()” method.
4. The event binding, “(sendToParent)=receivedItem($event)”, tells Angular to connect the event in the child- “sendToParent”, to the method in the parent- “receivedItem()”, and that the event that the child is notifying the parent about is to be the argument ($event) of “receivedItem()” method.

Step 18

1. In “parent.html”,
2. Iterate/Loop the list of items using the “*ngFor” directive to display each item that is pushed in the “items” array from the Child View input element.
3. Remember that the list <ul> is outside the <div> tag which contains Child View.

Step 19

1. Fire “ng serve” command in the Integrated Terminal of VS code.
2. Type any Item in the input area in the Child View e.g.- Laptop and click “Send” button.
3. The output will be the following

Laptop is listed in the output

Step 20

1. Similarly Add and “Send” more items.
2. The output will be:-

Step 21

1. If you will move <ul> and <li> below “This is parent View “ heading, the output will still be same but will be before Child View.

Step 22

1. Add and “Send” items just like Step 20.
2. The output will be-

// It is not necessary to use Input and Output together. You can use them separately depending on the requirement of the project.//