If you want to pass data from a child to a parent component in Angular, you can use the EventEmitter() class with the @Output() decorator. The EventEmitter() class must be added to the @Output() decorator to emit an event and notify the parent of the change. A good example of this in action is when you want to pass form input values from the child to parent component when a user clicks a button on a website. Let’s go over the steps to do it.
Angular EventEmitter Explained
EventEmitter() is a class in Angular that allows data to be passed from a child to a parent component. It’s used with the @Output() decorator. EventEmitter() can be useful for creating reactive buttons that send input values to the parent component.
4 Steps to Pass Data With EventEmitter in Angular
1. Raise an Event
We can configure a method in the child to raise an event when a user types into the input field.
export class ChildComponent {
@Output() newItemEvent = new EventEmitter<string>();
addNewItem(value: string) {
this.newItemEvent.emit(value);
}
}
2. Pass the Value to a Button Click Handler
In the child’s template, we use a template reference variable to reference the input field and then pass the value of the property to a button click handler.
<label for="item-input">Add an item:</label>
<input type="text" id="item-input" #newItem>
<button type="button" (click)="addNewItem(newItem.value)">Add to parent's list</button>
3. Connect the EventEmitter
With event binding, we connect the event emitter in the child to the method in the parent. The $event contains the data from the input in the child template:
<child-component (newItemEvent)="addItem($event)"></child-component>
export class ParentComponent {
items = ['item1', 'item2', 'item3', 'item4'];
addItem(newItem: string) {
this.items.push(newItem);
}
}4. Display the Data
Now that we have access to this data, we can display it in the parent component. With the help of **ngFor* to iterate the items in an array and render them in a list in the user interface (UI).
<ul>
<li *ngFor="let item of items">{{item}}</li>
</ul>
How to Pass Data From Parent to Child With @Input()
Similarly, we can pass data from parent to child. An @Input() decorator is added to a child component. The property that the @Input() decorator receives its value from the parent. Using interpolation, we can pass the property to the child component template.
@Input() item = ''; // decorate the property with @Input()
<p>
Today's item: {{item}}
</p>
Next, we use property binding to bind the property in the parent component’s template. The value in the parent is the one we are binding to.
<child-component [item]="currentItem"></child-component>
export class ParentComponent {
currentItem = 'Television';
}
And that’s all you need to know to pass data with EventEmitter() in Angular.
Frequently Asked Questions
What is EventEmitter() in Angular?
EventEmitter() is a class in Angular that allows users to pass data from the child component to the parent component. It’s used with the @Output() decorator.
How do you pass data with EventEmitter in Angular?
There are four steps to pass data with EventEmitter in Angular:
- Raise an event:
export class ChildComponent { @Output() newItemEvent = new EventEmitter<string>(); addNewItem(value: string) { this.newItemEvent.emit(value); } } - Pass the value to a button click handler:
<label for="item-input">Add an item:</label> <input type="text" id="item-input" #newItem> <button type="button" (click)="addNewItem(newItem.value)">Add to parent's list</button> - Connect with EventEmitter:
<child-component (newItemEvent)="addItem($event)"></child-component> export class ParentComponent { items = ['item1', 'item2', 'item3', 'item4']; addItem(newItem: string) { this.items.push(newItem); } } - Display the data:
<ul> <li *ngFor="let item of items">{{item}}</li> </ul>
