Chapter 11.1☕ 15 min read

@Input and @Output — Parent Child Data Flow

Components are isolated. @Input sends data down from parent to child. @Output sends events up from child to parent. This two-way flow is the foundation of Angular component communication.

01Why Component Communication

Angular components are isolated — they don't share state by default. To build meaningful UIs, components need to communicate.

"Parent = baap, Child = beta — baap se beta ko data do, beta se baap ko event do."

The fundamental rule:

Data flows DOWN via @Input — parent gives data to child
Events flow UP via @Output — child notifies parent
THIS IS UNIDIRECTIONAL DATA FLOW — Angular's design for predictability

<!-- Parent template -->
<app-child
  [data]="parentData"      <!-- @Input — data goes DOWN -->
  (childEvent)="handle()"> <!-- @Output — event comes UP -->
</app-child>

Why this design? Unidirectional data flow makes debugging easy — you always know where data comes from. If something changes, it changed in the parent or an event was emitted from the child. No two-way binding spaghetti.

02@Input — Parent to Child

@Input decorator marks a class property as receiving data from parent.

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

@Component({
  selector: 'app-biryani-card',
  template: `
    <div class="card">
      <h3>{{ biryaniName }}</h3>
      <p>Price: ₹{{ price }}</p>
    </div>
  `
})
export class BiryaniCardComponent {
  @Input() biryaniName = '';                    // Optional with default
  @Input({ required: true }) price!: number;     // Must be provided!
  @Input({ alias: 'img' }) imageUrl = '';       // Parent uses [img]
  @Input({ transform: booleanAttribute }) isActive = false;
}

"Input = courier from parent — parcel milta hai child ko."

Parent template usage:

<app-biryani-card
  [biryaniName]="'Hyderabadi Biryani'"
  [price]="500"
  [img]="'/images/biryani.jpg'"
  [isActive]="true">
</app-biryani-card>

@Input options:

required: true (Angular 17+) — compile error if parent doesn't provide
alias: 'img' — parent uses [img], child uses this.imageUrl
transform: booleanAttribute — auto-converts string/empty to boolean
transform: numberAttribute — auto-converts string to number

03@Output — Child to Parent

@Output decorator creates an event that the child can emit to notify the parent.

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

export interface Order {
  name: string;
  quantity: number;
  price: number;
}

@Component({...})
export class BiryaniCardComponent {
  @Input() biryaniName = '';
  @Input() price = 0;

  // @Output — ALWAYS use EventEmitter
  @Output() orderPlaced = new EventEmitter<Order>();

  placeOrder() {
    this.orderPlaced.emit({
      name: this.biryaniName,
      quantity: 1,
      price: this.price
    });
  }
}

"Output = callback from child — child bolta hai 'ye hua', parent sunta hai."

Parent template:

<app-biryani-card
  [biryaniName]="selectedBiryani"
  [price]="selectedPrice"
  (orderPlaced)="onOrder($event)">
</app-biryani-card>

Parent component:

onOrder(order: Order) {
  console.log('📦 Order received:', order);
  this.orderHistory.push(order);
}

Important rules for @Output:

ALWAYS use EventEmitter — never plain functions or Subjects
EventEmitter is Angular-specific — works with template event binding
It extends Subject, so you can also use it with RxJS operators

04Input with Transform (Angular 17+)

Angular 17+ introduced transform functions that automatically convert input values.

booleanAttribute: converts presence/truthy to boolean

// Component
@Input({ transform: booleanAttribute }) isActive = false;

// Parent — all of these set isActive to true:
<app-card isActive>                           <!-- empty string → true -->
<app-card [isActive]="'true'">               <!-- "true" → true -->
<app-card [isActive]="''">                   <!-- empty → true -->

// These set isActive to false:
<app-card>                                    <!-- not provided → false -->
<app-card [isActive]="false">                <!-- false → false -->
<app-card [isActive]="'false'">              <!-- "false" → false (converts!) -->

numberAttribute: converts string to number

// Component
@Input({ transform: numberAttribute }) count = 0;

// Parent
<app-counter [count]="5">        // 5 (number)
<app-counter count="5">          // "5" (string) → 5 (number) automatically!

Custom transform functions:

// Custom transformer
function toUpperCase(value: string): string {
  return value?.toUpperCase() ?? '';
}

@Input({ transform: toUpperCase }) name = '';
// Parent: [name]="'biryani'" → child gets 'BIRYANI'

"Transform = automatic converter — string se number, empty se boolean, custom bhi banao."

05Two-Way Binding with @Input + @Output

Two-way binding combines @Input and @Output with a naming convention.

// CHILD COMPONENT
@Component({...})
export class BiryaniInputComponent {
  @Input() name = '';                        // Property
  @Output() nameChange = new EventEmitter<string>(); // MUST be "name" + "Change"

  updateName(newName: string) {
    this.name = newName;
    this.nameChange.emit(newName);            // Notify parent
  }
}

// PARENT TEMPLATE
<app-biryani-input [(name)]="selectedBiryani"></app-biryani-input>

// This is SYNTAX SUGAR for:
<app-biryani-input
  [name]="selectedBiryani"
  (nameChange)="selectedBiryani = $event">
</app-biryani-input>

"Two-way = Input + Output with naming convention — Angular magic."

The naming convention is strict:

If @Input is name, @Output MUST be nameChange
If @Input is biryaniName, @Output MUST be biryaniNameChange
Without this exact naming, [(name)] won't work!

Modern alternative: As covered in Stage 10, model() signal does the same thing in 1 line instead of 3 properties + update method. But understanding @Input/@Output two-way is important for reading legacy code.

Key Takeaways

✅ Data flows DOWN (@Input), Events flow UP (@Output) — unidirectional
✅ @Input({ required: true }) — compile error if parent misses it
✅ @Input({ transform: booleanAttribute }) — auto-converts to boolean
✅ @Output — ALWAYS use EventEmitter, never plain functions
✅ Two-way binding: [(name)] works when @Output = nameChange
✅ Treat @Input as READ-ONLY in child — use @Output to notify parent

Previous10.5 — Signals vs BehaviorSubject 📋 All Chapters Next Chapter11.2 — ViewChild and ContentChild →