Angular has several interesting features that make it a powerful and popular framework for building web applications. One of those features is that its components can communicate and interact with each other. It means that you can pass data from one component to another.
In an Angular project, it is quite common to create a parent-child relationship between components. One of the main benefits of creating a parent-child relationship between components is that you can create reusable code i.e. create the child component just once and use it anywhere in the entire application.
But when we are dealing with the parent-child components, we generally need to pass data from the child component to the parent component or vice versa. For example, you can have a button in the child component and want to pass the data from child to parent on the button click.
In this article, I will show you a very easy and mostly used method to call the parent component function from the child component with the help of some relevant examples.
Call Parent Component Function from Child Component using @output Decorator
The @output decorator is used to pass data from a child component to its parent component(s). We can also use it with the event emitter to call the parent component’s function from its child component.
Let’s say, we have two components parent & child in our Angular application. We want to call the parent component’s function whenver we click a button inside the child component.
child.component.html
<div>
<h2>Child Component</h2>
<button (click)="onBtnClick()">Send Message</button>
</div>
As, you can see, we have added a click event handler function onBtnClick() to the button. It will get fired whenver someone clicks on the button.
Next, we need to declare an event emitter inside our child.component.ts file and put it inside the click event handler function.
This event emitter will emit an event to the parent component whenver the button is clicked.
child.component.ts
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
// Declare an event emitter
@Output() childEmitter = new EventEmitter();
constructor() { }
ngOnInit(): void { }
// Fires on button click
onBtnClick(){
// Send a notification to the parent
// that the button is clicked inside the child component
this.childEmitter.emit();
}
}
As of now, the child component is an independent component. To make it a child of the parent component, we can use its selector and put that selector inside the parent component’s html file.
parent.component.html
<div>
<h2>Parent Component</h2>
<p>Called by child comp: <b>{{count}}</b></p>
</div>
<!-- Use child selector to make parent-child relationship -->
<app-child (childEmitter)="eventFired($event)"></app-child>
As you can see, we have bound the (childEmitter) of the child component to the eventFired() function of the parent component.
It means, whenver the button is clicked inside the child component, the childEmitter will emit an event which will ultimately call the eventFired() function of the parent component.
Now, inside the eventFired() function, we have called the parentFunc() of the parent component, which increments the count variable by one.
So, as soon as you click the button inside the child component, the count variable of the parent component will be incremented by 1 and its updated value will be displayed.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
// Initialize counter
count = 0;
constructor() { }
ngOnInit(): void { }
// function to be called
parentFunc(){
this.count+=1; // Increment counter by 1
}
// Fires whenever button is clicked
eventFired(msg:any){
// Event is fired from child component
// Call any function you want
this.parentFunc();
}
}
Below is the outcome of the above code:
Pass Data from Child to Parent Component with EventEmitter
If you want to pass the data from the child component to the parent component, you can use the emit() method of the EventEmitter class.
The emit() method takes a single parameter, which represents the data that we want to emit from the EventEmitter when an event is emitted.
EventEmitter.emit(data);
Let’s say we want to send a custom message from the child component to the parent component whenever the button is clicked.
To do that, we can simply pass the message as an argument to the emit() method inside our child component. Here, I am taking reference of the above example.
child.component.ts
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
// Declare an event emitter
@Output() childEmitter = new EventEmitter();
// Initialize message counter
msgCount: number = 1;
constructor() { }
ngOnInit(): void { }
// Fires on button click
onBtnClick(){
// Send a message to the parent
// whenever the button is clicked inside child component
let message = 'This is child message '+ this.msgCount;
// Send msg to parent
this.childEmitter.emit(message);
this.msgCount+=1;
}
}
Now, you can pass the child message as $event inside the eventFired($event) function of the parent component.
parent.component.html
<div>
<h2>Parent Component</h2>
<p>{{msg}}</p>
</div>
<!-- Use child selector to make parent-child relationship -->
<app-child (childEmitter)="eventFired($event)"></app-child>
Whenver, you click the button inside the child component, the childEmitter will send the message from the child to the parent through the eventFired() function of the parent component which you can easily access.
parent.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
// Declare msg variable
msg: any = '';
constructor() { }
ngOnInit(): void { }
// Fires whenever button is clicked
eventFired(msg:any){
// Get latest message from child
this.msg = msg;
}
}
The message from the child component will be passed to the parent component on each button click and will be displayed in the view of the parent component.
Below is the outcome of the above code:
Conclusion
To call the parent component function from the child component, you can create an event emitter inside the child component and use the @output decorator to pass the event from the child to the parent.
If you also want to pass the data from the child to the parent component on an event, you can use the emit() method of the EventEmitter class. The emit() method takes a single parameter which specifies the value that is to be passed to the target whenver it emits the value.
Thanks for reading.
