Difference Between @Input() and @Output() Decorators

Difference Between `@Input()` and `@Output()` in Angular

In Angular, @Input() and @Output() decorators are used for communication between parent and child components.

They are among the most frequently asked concepts in Angular interviews.

1. `@Input()` Decorator

@Input() is used to pass data from Parent Component → Child Component.

The parent sends data, and the child receives it.

Example

Parent Component

<app-employee [employeeName]="name"></app-employee>

Parent TS

name = 'Sampath';

Child Component

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-employee',
  template: `<h2>{{ employeeName }}</h2>`
})
export class EmployeeComponent {

  @Input()
  employeeName!: string;

}

Flow

Parent → Child

2. `@Output()` Decorator

@Output() is used to send data/events from Child Component → Parent Component.

It works using EventEmitter.

Example

Child Component

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-employee',
  template: `<button (click)="sendData()">Send</button>`
})
export class EmployeeComponent {

  @Output()
  employeeSelected = new EventEmitter<string>();

  sendData() {
    this.employeeSelected.emit('John');
  }

}

Parent Component HTML

<app-employee
(employeeSelected)="receiveData($event)">
</app-employee>

Parent Component TS

receiveData(data: string) {
  console.log(data);
}

Flow

Child → Parent

Key Differences Between `@Input()` and `@Output()`

Feature	`@Input()`	`@Output()`
Purpose	Receive data	Send data/events
Data Flow	Parent → Child	Child → Parent
Used With	Property Binding	Event Binding
Decorator Type	`@Input()`	`@Output()`
Requires EventEmitter	No	Yes
Communication Type	One-way data input	Event-based communication
Typical Use	Pass values/settings	Notify parent about actions

Real-Time Example

Imagine an Employee List component.

Parent Component

Holds employee data
Passes employee details to child

Child Component

Displays employee information
Sends event when employee is selected

Parent → Child

<app-employee-card
[employee]="employee">
</app-employee-card>

Child → Parent

<app-employee-card
(employeeClicked)="onEmployeeClick($event)">
</app-employee-card>

Important Interview Points

1. `@Input()` Uses Property Binding

[employee]="employeeData"

Angular binds data from parent property to child property.

2. `@Output()` Uses Event Binding

(employeeClicked)="handleClick($event)"

Angular listens to events emitted from child.

3. `EventEmitter` is Mandatory for `@Output()`

@Output()
save = new EventEmitter<any>();

To send data:

this.save.emit(data);

Aliasing in Decorators

You can give different public names.

`@Input()` Alias

@Input('empName')
employeeName!: string;

Usage:

<app-employee [empName]="name"></app-employee>

`@Output()` Alias

@Output('selected')
employeeSelected = new EventEmitter();

Usage:

<app-employee (selected)="onSelect()"></app-employee>

Common Interview Questions

Q1. Can child component modify `@Input()` data?

Yes, but it is not recommended because Angular follows unidirectional data flow. Usually, the child should notify the parent using @Output().

Q2. Can we use both `@Input()` and `@Output()` together?

Yes. Very common in reusable components.

Example:

Parent sends product data using @Input()
Child notifies selection using @Output()

Q3. What happens if `EventEmitter` is not used with `@Output()`?

The parent cannot listen properly for emitted events.

Q4. Is `@Input()` two-way binding?

No.

But combining @Input() + @Output() can create custom two-way binding.

Example:

@Input() value: string = '';

@Output() valueChange = new EventEmitter<string>();

Usage:

<app-counter [(value)]="count"></app-counter>

Memory Trick for Interviews

@Input() → Data comes INTO child
@Output() → Data goes OUT OF child

Interview Summary

@Input() and @Output() are Angular decorators used for component communication.

@Input() receives data from parent to child.
@Output() sends events/data from child to parent using EventEmitter.

Together they help build reusable and loosely coupled Angular components.