Course Progress 30%

Angular @Input and @Output

← Angular Component Communication Angular ViewChild & ContentChild →

Angular में @Input और @Output decorators parent और child components के बीच data और event communication के लिए use होते हैं। ये component interaction का सबसे common तरीका है।

इस chapter में आप सीखेंगे:

  • @Input क्या है और use कैसे करें
  • @Output और EventEmitter का use
  • Parent ↔ Child communication example
  • Best practices

1. @Input – Parent → Child

@Input() decorator child component को allow करता है कि parent component से data receive करे।

Example

// child.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<p>Message from parent: {{ message }}</p>`
})
export class ChildComponent {
  @Input() message!: string;
}

// parent.component.html
<app-child [message]="'Hello from Parent!'"></app-child>

Explanation

  • @Input() decorator child property को parent से bind करने के लिए enable करता है
  • [message] parent template में bind property है
  • Child template में {{ message }} display होगी

Child component automatically receive कर लेता है parent की value

Multiple Inputs

@Input() name!: string;
@Input() age!: number;

<app-child [name]="'Alice'" [age]="25"></app-child>
  • एक component में कई properties parent से bind हो सकती हैं

2. @Output – Child → Parent

@Output() decorator child component को allow करता है कि parent component को event emit करे।

Example

// child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="notifyParent()">Notify Parent</button>`
})
export class ChildComponent {
  @Output() notify = new EventEmitter<string>();

  notifyParent() {
    this.notify.emit('Hello Parent!');
  }
}

<!-- parent.component.html -->
<app-child (notify)="onNotify($event)"></app-child>

// parent.component.ts
onNotify(message: string) {
  alert(message);
}

Explanation

  • @Output() child event parent template में bind करने के लिए use होता है
  • EventEmitter<string>() event के साथ data भेजता है
  • (notify) parent template में event handle करता है
  • $event variable child से emit हुआ data hold करता है

Multiple Outputs

@Output() saved = new EventEmitter<boolean>();
@Output() canceled = new EventEmitter<void>();

<app-child (saved)="onSave($event)" (canceled)="onCancel()"></app-child>
  • Child component multiple events emit कर सकता है

3. Combined Example

// child.component.ts
@Component({
  selector: 'app-child',
  template: `
    <p>{{ message }}</p>
    <button (click)="sendReply()">Reply</button>
  `
})
export class ChildComponent {
  @Input() message!: string;
  @Output() reply = new EventEmitter<string>();

  sendReply() {
    this.reply.emit('Thanks, Parent!');
  }
}

<!-- parent.component.html -->
<app-child [message]="'Hello Child!'" (reply)="receiveReply($event)"></app-child>

// parent.component.ts
receiveReply(msg: string) {
  console.log('Child says:', msg);
}

Explanation

  • Parent sends data → Child receives via @Input
  • Child sends event/data → Parent receives via @Output
  • Full two-way communication without tightly coupling

Best Practices

  • Simple data → Input
  • User actions → Output + EventEmitter
  • Avoid passing large objects → prefer services for shared state
  • Name outputs clearly → e.g., update, delete, selected
  • Combine Input/Output for reusable child components

Summary

इस chapter में आपने सीखा:

  • @Input से Parent → Child data binding
  • @Output और EventEmitter से Child → Parent communication
  • Multiple inputs और outputs handle करना
  • Combined parent-child communication example
  • Best practices for clean component interaction
← Angular Component Communication Angular ViewChild & ContentChild →
  • Home