Introduction:
In our previous post about Data Binding in Angular, we covered how to enable communication between the view and the component. But what happens when you have multiple components that need to share data? This is where Input and Output in Angular come in. Input allows a component to receive data from the parent component, while Output allows a component to emit data to the parent component. In this post, we’ll take a closer look at Input and Output in Angular and how they can facilitate communication between components in your application.
Input and Output in Angular
As mentioned above, Input and Output in Angular are used to share data between components. Input is used to pass data from the parent component to the child component, while Output is used to pass data from the child component to the parent component.
Input and Output are defined in the component decorator using the @Input() and @Output() decorators, respectively.
@Input() in Angular
@Input() is used to define an input property on a child component and allows the parent component to pass data to the child component. The child component can then use this data for its own purposes.
Here is an example of how to use @Input() in Angular:
Parent Component HTML:
<app-child [inputData]="myData"></app-child>Child Component TypeScript:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html'
})
export class ChildComponent {
@Input() inputData: any;
constructor() { }
}In the example above, the parent component is passing the value of the myData variable to the child component using the [inputData] attribute. The child component is then receiving this data using the @Input() decorator and storing it in the inputData variable.
@Output() in Angular
@Output() is used to define an output property on a child component and allows the child component to emit data back to the parent component.
Here is an example of how to use @Output() in Angular:
Parent Component HTML:
<app-child (outputData)="onOutputData($event)"></app-child>Child Component TypeScript:
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html'
})
export class ChildComponent {
@Output() outputData = new EventEmitter<any>();
constructor() { }
sendData() {
this.outputData.emit('Data emitted from child component');
}
}In the example above, the parent component is listening for the outputData event using the (outputData) attribute and calling the onOutputData method when the event is fired. The child component is emitting the outputData event using the outputData variable and the .emit() method when the sendData method is called.
Conclusion:
Input and Output in Angular are powerful tools that allow components to share data with each other. By using @Input() and @Output() in your components, you can create a more efficient and modular application that can be easily scaled and maintained. Understanding how to use Input and Output in Angular is essential for any developer looking to improve their application’s performance and codebase. Happy Coding with WebDevTutos