Angular applications are built using multiple reusable components. These components frequently need to exchange information. Angular provides two powerful decorators for this purpose:

• @Input() → Parent ➜ Child Communication
• @Output() → Child ➜ Parent Communication

These decorators form the foundation of component communication and are among the most frequently asked Angular interview topics.

---

Table of Contents

• What are Decorators?
• What is @Input()?
• What is @Output()?
• Property Binding
• Event Binding
• EventEmitter
• Communication Flow
• Input Aliasing
• Required Inputs
• Input Transformation
• Signal Inputs & Outputs (Angular 17+)
• Real-World Example
• Best Practices
• Top 10 Interview Questions
• Summary

---

What are Decorators?

Decorators are TypeScript annotations that provide metadata to Angular.

Common Angular decorators include:

Decorator	Purpose
@Component	Defines a Component
@Injectable	Defines a Service
@Directive	Defines a Directive
@Pipe	Defines a Pipe
@Input	Parent → Child Communication
@Output	Child → Parent Communication
@HostBinding	Bind Host Properties
@HostListener	Listen to Host Events

---

Component Communication Overview

flowchart LR

ParentComponent

ParentComponent -- "@Input()" --> ChildComponent

ChildComponent -- "@Output()" --> ParentComponent

---

What is @Input()?

@Input() allows a parent component to send data to a child component.

It supports one-way data flow, making child components reusable and configurable.

---

Parent → Child Flow

sequenceDiagram

participant Parent

participant Child

Parent->>Child: Pass Data

Child->>Child: Render UI

Child-->>Parent: Display Updated View

---

Parent Component Example

@Component({
  selector: 'app-parent',
  standalone: true,
  imports: [UserComponent],
  template: `
    <app-user
      [username]="userName"
      [age]="userAge">
    </app-user>
  `
})
export class ParentComponent {

  userName = "Venu";
  userAge = 35;

}

---

Child Component Example

@Component({
  selector: 'app-user',
  standalone: true,
  template: `
      <h2>{{username}}</h2>

      <h3>{{age}}</h3>
  `
})
export class UserComponent {

  @Input()

  username!: string;

  @Input()

  age!: number;

}

Output

Venu

35

---

Property Binding

Angular uses square brackets for property binding.

<app-user

[name]="username">

</app-user>

Property Binding Flow

flowchart LR

ParentVariable

ParentVariable --> PropertyBinding

PropertyBinding --> ChildInput

---

Input Aliasing

Angular allows changing the external property name.

@Input("user-name")

username!: string;

Usage

<app-user

[user-name]="name">

</app-user>

Useful when:

• Preserving backward compatibility
• Exposing clearer APIs
• Avoiding naming conflicts

---

Required Inputs (Angular 16+)

Angular supports required inputs.

@Input({

required:true

})

username!:string;

Benefits

• Compile-time validation
• Fewer runtime errors
• Better developer experience

---

Input Transformation

Angular supports transforming values before assignment.

@Input({

transform:(value:string)=>value.trim()

})

username!:string;

Useful for:

• Trimming strings
• Boolean conversion
• Number parsing
• Input sanitization

---

What is @Output()?

@Output() enables child components to send events back to the parent.

It uses Angular's EventEmitter.

---

Child → Parent Flow

sequenceDiagram

participant Child

participant Parent

Child->>Parent: EventEmitter.emit()

Parent->>Parent: Execute Event Handler

---

EventEmitter Example

Child Component

@Output()

save = new EventEmitter<string>();

saveProfile(){

    this.save.emit("Profile Saved");

}

Parent Component

<app-user

(save)="profileSaved($event)">

</app-user>

profileSaved(message:string){

console.log(message);

}

Console

Profile Saved

---

Event Binding

Angular uses parentheses for event binding.

<app-user

(save)="onSave()">

</app-user>

---

Event Binding Flow

flowchart LR

ButtonClick

ButtonClick --> EventEmitter

EventEmitter --> ParentHandler

---

Passing Complex Objects

@Output()

selected =

new EventEmitter<User>();

this.selected.emit({

id:1,

name:"Venu"

});

Parent

selectUser(user:User){

console.log(user);

}

---

Multiple Inputs and Outputs

@Input()

username!:string;

@Input()

email!:string;

@Output()

save=new EventEmitter<void>();

@Output()

cancel=new EventEmitter<void>();

Components may expose multiple inputs and outputs depending on their API.

---

Signal Inputs (Angular 17+)

Angular introduced Signal-based inputs.

import { input } from '@angular/core';

username = input('');

Read value

this.username()

Advantages

• Reactive
• Simpler API
• Better performance
• Works naturally with Signals

---

Signal Outputs

Angular also supports signal-friendly outputs.

import { output } from '@angular/core';

save = output<string>();

Emit value

this.save.emit("Saved");

---

Communication Architecture

flowchart TD

Parent

Parent --> InputDecorator

InputDecorator --> Child

Child --> OutputDecorator

OutputDecorator --> Parent

---

Complete Communication Flow

flowchart TD

ParentData

ParentData --> Input

Input --> ChildComponent

ChildComponent --> UserAction

UserAction --> Output

Output --> ParentMethod

ParentMethod --> UpdateUI

---

Real-World Banking Example

Imagine a banking application.

flowchart TD

Dashboard

Dashboard --> AccountCard

Dashboard --> TransferComponent

TransferComponent --> TransactionComplete

TransactionComplete --> Dashboard

Dashboard --> RefreshBalance

Scenario

• Dashboard passes account information using @Input().
• Transfer component emits a completion event using @Output().
• Dashboard reloads account balances after receiving the event.

---

@Input() vs @Output()

Feature	@Input()	@Output()
Direction	Parent → Child	Child → Parent
Purpose	Pass data	Send events
Binding Syntax	[property]	(event)
Uses	Property Binding	Event Binding
Data Flow	One-way	Event-driven
Typical Data	Strings, Objects, Arrays	User Actions

---

Best Practices

• Keep data flow one-way.
• Prefer immutable input data.
• Emit events instead of directly modifying parent state.
• Use meaningful event names (saved, deleted, updated).
• Validate required inputs.
• Keep child components reusable.
• Use Signal Inputs in modern Angular projects.

---

Common Mistakes

• Modifying an @Input() object directly.
• Using @Output() to pass large application state.
• Naming outputs with generic names like click.
• Forgetting to emit values.
• Creating unnecessary input/output pairs.
• Using two-way binding when one-way communication is sufficient.

---

Advantages

Feature	Benefit
@Input	Simple data flow
@Output	Event-driven architecture
EventEmitter	Decoupled communication
Required Inputs	Compile-time safety
Input Transform	Cleaner data
Signal Inputs	Reactive updates
Signal Outputs	Modern event handling

---

Top 10 Angular @Input() and @Output() Interview Questions

1. What is @Input()?

Answer

@Input() is an Angular decorator that enables a parent component to pass data to a child component using property binding.

---

2. What is @Output()?

Answer

@Output() is an Angular decorator that allows a child component to send events back to the parent using EventEmitter.

---

3. What is the difference between @Input() and @Output()?

@Input()	@Output()
Parent → Child	Child → Parent
Passes data	Emits events
Property Binding	Event Binding

---

4. What is EventEmitter?

Answer

EventEmitter is an Angular class used with @Output() to emit custom events from a child component to its parent.

---

5. What is Property Binding?

Answer

Property binding uses square brackets ([]) to bind parent component data to child component input properties.

Example:

<app-user [username]="name"></app-user>

---

6. What is Event Binding?

Answer

Event binding uses parentheses (()) to listen for events emitted by a child component.

Example:

<app-user (save)="onSave($event)"></app-user>

---

7. What are Required Inputs?

Answer

Required inputs ensure that a parent supplies a value for a component input. Angular validates this at compile time, helping catch configuration errors early.

---

8. What are Signal Inputs?

Answer

Signal Inputs are Angular's modern reactive alternative to traditional @Input(). They integrate directly with the Signals API and simplify reactive state updates.

---

9. Can a component have multiple Inputs and Outputs?

Answer

Yes. A component can expose multiple @Input() and @Output() properties to create a clear and flexible API.

---

10. What are the best practices for using @Input() and @Output()?

Answer

• Keep data flow one-way.
• Avoid modifying input values directly.
• Emit events instead of calling parent methods.
• Use descriptive event names.
• Validate required inputs.
• Prefer Signal Inputs and Outputs in modern Angular applications.

---

Interview Cheat Sheet

Topic	Remember
Parent → Child	@Input()
Child → Parent	@Output()
Property Binding	[property]
Event Binding	(event)
Event Class	EventEmitter
Input Alias	@Input('alias')
Required Input	required: true
Input Transform	transform
Angular 17+	input()
Angular 17+ Output	output()

---

Summary

@Input() and @Output() are the primary mechanisms for communication between parent and child components in Angular. @Input() enables one-way data flow from parent to child, while @Output() uses EventEmitter to send events back to the parent. Modern Angular extends these capabilities with Signal-based input() and output(), providing a more reactive and streamlined approach. Choosing the appropriate communication pattern helps build reusable, maintainable, and scalable Angular applications.

---

Next Article

➡️ 15-ViewChild-ContentChild-QA.md