Sharing data between child and parent
directives and components
A common pattern in Angular is sharing data between a parent component and one or more child components.
Implement this pattern with the @Input() and @Output() decorators.
See the live example / download example for a working example containing the code snippets in this
guide.
Consider the following hierarchy:
<<ppaarreenntt--ccoommppoonneenntt>>
<<cchhiilldd--ccoommppoonneenntt>><<∕∕cchhiilldd--ccoommppoonneenntt>>
<<∕∕ppaarreenntt--ccoommppoonneenntt>>
The <parent-component> serves as the context for the <child-component> .
@Input() and @Output() give a child component a way to communicate with its parent component.
@Input() lets a parent component update data in the child component. Conversely, @Output() lets the child
send data to a parent component.
Sending data to a child component
The @Input() decorator in a child component or directive signi�es that the property can receive its value from
its parent component.
@Input
data flow
Parent Child
To use @Input() , you must con�gure the parent and child.
Con�guring the child component
To use the @Input() decorator in a child component class, �rst import Input and then decorate the property
with @Input() , as in the following example.
src/app/item-detail/item-detail.component.ts
iimmppoorrtt { CCoommppoonneenntt, IInnppuutt } ffrroomm '@angular∕core'; ∕∕ First, import Input
eexxppoorrtt ccllaassss IItteemmDDeettaaiillCCoommppoonneenntt {
@Input() item = ''; ∕∕ decorate the property with @Input()
}
In this case, @Input() decorates the property item , which has a type of string , however, @Input()
properties can have any type, such as number , string , boolean , or object . The value for item comes
from the parent component.
Next, in the child component template, add the following:
src/app/item-detail/item-detail.component.html
<<pp>>
Today's item: {{item}}
<<∕∕pp>>
Con�guring the parent component
The next step is to bind the property in the parent component's template. In this example, the parent component
template is app.component.html .
1. Use the child's selector, here <app-item-detail> , as a directive within the parent component template.
2. Use property binding to bind the item property in the child to the currentItem property of the parent.
src/app/app.component.html
<<aapppp--iitteemm--ddeettaaiill [item]="currentItem">><<∕∕aapppp--iitteemm--ddeettaaiill>>
3. In the parent component class, designate a value for currentItem :
src/app/app.component.ts
eexxppoorrtt ccllaassss AAppppCCoommppoonneenntt {
currentItem = 'Television';
}
With @Input() , Angular passes the value for currentItem to the child so that item renders as Television .
The following diagram shows this structure:
source
property from
child
parent
selector
<app-item-detail [item]="currentItem"></app-item-detail>
target
@Input()
property from
child
The target in the square brackets, [] , is the property you decorate with @Input() in the child component. The
binding source, the part to the right of the equal sign, is the data that the parent component passes to the nested
component.
Watching for @Input() changes
To watch for changes on an @Input() property, use OnChanges , one of Angular's lifecycle hooks. See the
OnChanges section of the Lifecycle Hooks guide for more details and examples.
Sending data to a parent component
The @Output() decorator in a child component or directive lets data �ow from the child to the parent.
@Output
data flow
Parent Child
@Output() marks a property in a child component as a doorway through which data can travel from the child to
the parent.
The child component uses the @Output() property to raise an event to notify the parent of the change. To raise
an event, an @Output() must have the type of EventEmitter , which is a class in @angular∕core that you
use to emit custom events.
The following example shows how to set up an @Output() in a child component that pushes data from an
HTML <input> to an array in the parent component.
To use @Output() , you must con�gure the parent and child.
Con�guring the child component
The following example features an <input> where a user can enter a value and click a <button> that raises an
event. The EventEmitter then relays the data to the parent component.
1. Import Output and EventEmitter in the child component class:
iimmppoorrtt { OOuuttppuutt, EEvveennttEEmmiitttteerr } from '@angular∕core';
2. In the component class, decorate a property with @Output() . The following example newItemEvent
@Output() has a type of EventEmitter , which means it's an event.
src/app/item-output/item-output.component.ts
@Output() newItemEvent = nneeww EEvveennttEEmmiitttteerr<string>();
The different parts of the preceding declaration are as follows:
DECLARATION PARTS DETAILS
@Output() A decorator function marking the property as a way for data to
go from the child to the parent.
newItemEvent The name of the @Output() .
EventEmitter<string> The @Output() 's type.
new Tells Angular to create a new event emitter and that the data it
EventEmitter<string>() emits is of type string.
For more information on EventEmitter , see the EventEmitter API documentation.
3. Create an addNewItem() method in the same component class:
src/app/item-output/item-output.component.ts
eexxppoorrtt ccllaassss IItteemmOOuuttppuuttCCoommppoonneenntt {
@Output() newItemEvent = nneeww EEvveennttEEmmiitttteerr<string>();
addNewItem(vvaalluuee: ssttrriinngg) {
tthhiiss.newItemEvent.emit(vvaalluuee);
}
}
The addNewItem() function uses the @Output() , newItemEvent , to raise an event with the value the
user types into the <input> .
Con�guring the child's template
The child's template has two controls. The �rst is an HTML <input> with a template reference variable,
#newItem , where the user types in an item name. The value property of the #newItem variable stores what
the user types into the <input> .
src/app/item-output/item-output.component.html
<<llaabbeell for="item-input">>Add an item:<<∕∕llaabbeell>>
<<iinnppuutt type="text" id="item-input" #newItem>>
<<bbuuttttoonn type="button" (click)="addNewItem(newItem.value)">>Add to parent's
list<<∕∕bbuuttttoonn>>
The second element is a <button> with a click event binding.
The (click) event is bound to the addNewItem() method in the child component class. The addNewItem()
method takes as its argument the value of the #newItem.value property.
Con�guring the parent component
The AppComponent in this example features a list of items in an array and a method for adding more items to
the array.
src/app/app.component.ts
eexxppoorrtt ccllaassss AAppppCCoommppoonneenntt {
items = ['item1', 'item2', 'item3', 'item4'];
addItem(newItem: ssttrriinngg) {
tthhiiss.items.push(newItem);
}
}
The addItem() method takes an argument in the form of a string and then adds that string to the items array.
Con�guring the parent's template
1. In the parent's template, bind the parent's method to the child's event.
2. Put the child selector, here <app-item-output> , within the parent component's template,
app.component.html .
src/app/app.component.html
<<aapppp--iitteemm--oouuttppuutt (newItemEvent)="addItem($event)">><<∕∕aapppp--iitteemm--oouuttppuutt>>
The event binding, (newItemEvent)='addItem($event)' , connects the event in the child,
newItemEvent , to the method in the parent, addItem() .
The $event contains the data that the user types into the <input> in the child template UI.
To see the @Output() working, add the following to the parent's template:
<<uull>>
<<llii *ngFor="let item of items">>{{item}}<<∕∕llii>>
<<∕∕uull>>
The *ngFor iterates over the items in the items array. When you enter a value in the child's <input>
and click the button, the child emits the event and the parent's addItem() method pushes the value to the
items array and new item renders in the list.
Using @Input() and @Output() together
Use @Input() and @Output() on the same child component as follows:
src/app/app.component.html
<<aapppp--iinnppuutt--oouuttppuutt
[item]="currentItem"
(deleteRequest)="crossOffItem($event)">>
<<∕∕aapppp--iinnppuutt--oouuttppuutt>>
The target, item , which is an @Input() property in the child component class, receives its value from the
parent's property, currentItem . When you click delete, the child component raises an event, deleteRequest ,
which is the argument for the parent's crossOffItem() method.
The following diagram shows the different parts of the @Input() and @Output() on the <app-input-
output> child component.
source target
property from handler from
child
parent parent
selector
<app-input-output [item]="currentItem" (deleteRequest)="crossOffItem($event)"></app-input-output>
target source
@Input() @Output()
property from event from
child child
The child selector is <app-input-output> with item and deleteRequest being @Input() and @Output()
properties in the child component class. The property currentItem and the method crossOffItem() are both
in the parent component class.
To combine property and event bindings using the banana-in-a-box syntax, [()] , see Two-way Binding.
