How to Use @Input()?
Example of @Input() in Angular
@Input() allows data flow from a parent component to a child component.
Step 1: Define an @Input() property in the Child Component
child.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `<h3>Welcome, {{ name }}!</h3>`
})
export class ChildComponent {
@Input() name!: string;
}
Step 2: Pass data from the Parent Component
parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `<app-child [name]="userName"></app-child>`
})
export class ParentComponent {
userName: string = 'John Doe';
}
Output:
Welcome, John Doe!
Here, the userName from the ParentComponent is passed to the ChildComponent using @Input().
How to Use @Output()?
@Output() is used to send data or events from a child component to a parent component.
Example of @Output() in Angular
Step 1: Define an @Output() Event Emitter in the Child Component
child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `<button (click)="sendMessage()">Click Me</button>`
})
export class ChildComponent {
@Output() messageEvent = new EventEmitter<string>();
sendMessage() {
this.messageEvent.emit('Hello from Child Component!');
}
}
Step 2: Handle the Event in the Parent Component
parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `<app-child (messageEvent)="receiveMessage($event)"></app-child>
<p>{{ message }}</p>`
})
export class ParentComponent {
message: string = '';
receiveMessage(event: string) {
this.message = event;
}
}
Output:
(Button is clicked)
Hello from Child Component!
This shows how @Output() helps send data from a child component to a parent component.
@Input() and @Output() Together
Both @Input() and @Output() can be used together to establish two-way communication between components.
Example of using @Input() and @Output() together
child.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<h3>Welcome, {{ name }}!</h3>
<button (click)="sendMessage()">Send Greeting</button>
`
})
export class ChildComponent {
@Input() name!: string;
@Output() messageEvent = new EventEmitter<string>();
sendMessage() {
this.messageEvent.emit(`Hello, ${this.name}!`);
}
}
parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<app-child [name]="userName" (messageEvent)="receiveMessage($event)"></app-child>
<p>{{ message }}</p>
`
})
export class ParentComponent {
userName: string = 'John Doe';
message: string = '';
receiveMessage(event: string) {
this.message = event;
}
}
Output:
Welcome, John Doe!
(Button is clicked)
Hello, John Doe!
This demonstrates both @Input() and @Output() in action together.
@Input() and @Output() Declarations
Declaring @Input()
@Input() propertyName: type;
Example:
@Input() userAge!: number;
Declaring @Output()
@Output() propertyName = new EventEmitter<type>();
Example:
@Output() userUpdated = new EventEmitter<string>();
Aliasing Inputs and Outputs
We can alias inputs and outputs by passing a string argument to @Input() and @Output().
Example
@Input('customName') name!: string;
@Output('customEvent') messageEvent = new EventEmitter<string>();
Usage in Parent Component
<app-child [customName]="userName" (customEvent)="receiveMessage($event)"></app-child>
This allows us to use different names in the parent and child components.
How Components Interact in Angular?
In Angular, components are the building blocks of an application. They are responsible for managing a specific part of the user interface. For an application to work smoothly, components need to communicate with each other. This communication happens through Input & Output properties.
What are Input & Output Properties?
- Input: Used to pass data from a parent component to a child component.
- Output: Used to send data from a child component to a parent component.
Let’s understand this with an example.
Example: Passing Data from Parent to Child (Input)
Imagine you have a parent component (`AppComponent`) & a child component (`UserComponent`). You want to pass a user’s name from the parent to the child.
Step 1: Create the Child Component
First, generate the child component using Angular CLI:
ng generate component user
Step 2: Define the Input Property in the Child Component
In the `user.component.ts` file, define an input property to receive the data:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-user',
template: `<p>Welcome, {{ userName }}!</p>`
})
export class UserComponent {
@Input() userName: string; // This will receive data from the parent
}
Step 3: Pass Data from the Parent Component
In the `app.component.ts` file, pass the data to the child component:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>User Details</h1>
<app-user [userName]="name"></app-user> <!-- Passing data to the child -->
`
})
export class AppComponent {
name = 'John Doe'; // Data to be passed
}
Here, the `userName` property in the child component receives the value `John Doe` from the parent.
Example: Sending Data from Child to Parent (Output)
Now, let’s say the child component needs to send a message back to the parent.
Step 1: Define the Output Property in the Child Component
In the `user.component.ts` file, define an output property using `EventEmitter`:
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-user',
template: `
<p>Welcome, {{ userName }}!</p>
<button (click)="sendMessage()">Send Message</button>
`
})
export class UserComponent {
@Input() userName: string;
@Output() messageEvent = new EventEmitter<string>(); // Output property
sendMessage() {
this.messageEvent.emit('Hello from the child!'); // Emitting data
}
}
Step 2: Handle the Output in the Parent Component
In the `app.component.ts` file, handle the emitted event:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>User Details</h1>
<app-user [userName]="name" (messageEvent)="receiveMessage($event)"></app-user>
<p>{{ message }}</p>
`
})
export class AppComponent {
name = 'John Doe';
message: string;
receiveMessage($event: string) {
this.message = $event; // Receiving data from the child
}
}
Here, when the button in the child component is clicked, it sends a message to the parent, which is then displayed.
Why is This Important?
Input & output properties make Angular components reusable & modular. By passing data between components, you can build complex applications with clear separation of concerns.
Frequently Asked Questions
What is the difference between @Input() and @Output() in Angular?
@Input() is used to pass data from a parent component to a child component, whereas @Output() is used to send data from a child component to a parent component.
Can I use both @Input() and @Output() in the same component?
Yes, you can use both in a component to allow two-way communication between the parent and child components.
How do I pass multiple values using @Input()?
You can pass multiple values by defining multiple @Input() properties and binding them in the template.
Conclusion
In this article, we learned about Input and Output Directives in Angular and how they help components communicate with each other. The @Input() decorator allows data to flow into a component, while @Output() sends data from one component to another. Understanding these directives is important for creating dynamic and interactive Angular applications.
518+ registered 
