Introduction:
Angular is a popular open-source JavaScript framework that facilitates the building of dynamic web applications. One of the essential features of Angular is component-based architecture, which enables developers to build complex user interfaces while keeping code maintainable and scalable. In this article, we’ll discuss how to pass data from a child component to a parent component in Angular.
Passing Data from Child to Parent Component:
In Angular, components communicate with each other using @Input() and @Output() decorators. The @Input() decorator enables a component to receive data from its parent component, and the @Output() decorator enables a component to emit data to its parent component. Let’s dive into the details of how we can use these decorators to pass data from a child component to a parent component.
1. Using @Input() Decorator:
The @Input() decorator is used to bind a value to a component property. In other words, the parent component can pass a value to the child component as an input using the @Input() decorator. Here’s how to use the @Input() decorator:
a. In the child component’s TypeScript file, declare a public property and decorate it with the @Input() decorator. This property will receive the value passed from the parent component.
b. In the parent component’s HTML file, pass the value to the child component as a property binding using the property name decorated with the @Input() decorator.
For example, let’s consider a child component named ChildComponent and a parent component named ParentComponent. Here’s how to pass data from ChildComponent to ParentComponent:
ChildComponent.ts:
“`
import { Component, Input } from ‘@angular/core’;
@Component({
selector: ‘app-child’,
template: ‘
‘
})
export class ChildComponent {
@Input() message: string;
}
“`
ParentComponent.html:
“`
“`
ParentComponent.ts:
“`
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-parent’,
template: ‘
})
export class ParentComponent {
parentMessage = ‘Message from Parent’;
}
“`
In the above example, the parentMessage property in the ParentComponent is passed to the message property in the ChildComponent through property binding.
2. Using @Output() Decorator:
The @Output() decorator is used to emit an event from a child component to its parent component. In other words, the child component can pass data to its parent component using the @Output() decorator. Here’s how to use the @Output() decorator:
a. In the child component’s TypeScript file, declare an event property and decorate it with the @Output() decorator. This property will emit an event that the parent component can listen to.
b. In the child component’s HTML file, emit the event using the event property decorated with the @Output() decorator.
c. In the parent component’s TypeScript file, handle the emitted event using an event listener. In the event listener, you can access the data passed by the child component.
For example, consider a child component named ChildComponent and a parent component named ParentComponent. Here’s how to pass data from ChildComponent to ParentComponent using @Output() decorator:
ChildComponent.ts:
“`
import { Component, EventEmitter, Output } from ‘@angular/core’;
@Component({
selector: ‘app-child’,
template: ‘‘
})
export class ChildComponent {
@Output() messageEvent = new EventEmitter
sendMessage() {
this.messageEvent.emit(‘Message from Child’);
}
}
“`
ParentComponent.html:
“`
“`
ParentComponent.ts:
“`
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-parent’,
template: ‘
})
export class ParentComponent {
message = ”;
receiveMessage($event: string) {
this.message = $event;
}
}
“`
In the above example, when the user clicks on the “Send Message” button in the ChildComponent, an event is emitted through the messageEvent property decorated with the @Output() decorator. The event is then handled in the ParentComponent’s receiveMessage() method, where the message is assigned to the message property.
FAQs:
Q. What is the difference between @Input() and @Output() decorators in Angular?
A. @Input() decorator is used to bind a value to a component property, whereas @Output() decorator is used to emit an event from a component.
Q. Can a child component have multiple @Input() properties?
A. Yes, a child component can have multiple @Input() properties.
Q. Can a child component emit multiple events using the @Output() decorator?
A. Yes, a child component can emit multiple events using the @Output() decorator.
Q. How to pass data between sibling components in Angular?
A. You can pass data between sibling components by using a shared service or using the @Input() and @Output() decorators.
Q. How to implement two-way binding in Angular?
A. Two-way binding can be implemented in Angular using the [(ngModel)] directive.
Conclusion:
Passing data from a child component to a parent component is a common requirement in Angular applications. In this article, we discussed how we can use the @Input() and @Output() decorators to pass data between components. By following the examples and explanations provided, you can easily pass data between components in your Angular applications.