@Input اور @Output والد اور بچے کے کمپوننٹ کے درمیان بات چیت کا معیاری طریقہ ہیں: @Input ڈیٹا منتقل کرتا ہے (والد → بچہ)، اور ایونٹس بھیجتا ہے (بچہ → والد)۔ یہ عام "props نیچے، events اوپر" کے نمونے کی نقل کرتا ہے۔
@Input اور @Output والد اور بچے کے کمپوننٹ کے درمیان بات چیت کا معیاری طریقہ ہیں: @Input ڈیٹا منتقل کرتا ہے (والد → بچہ)، اور ایونٹس بھیجتا ہے (بچہ → والد)۔ یہ عام "props نیچے، events اوپر" کے نمونے کی نقل کرتا ہے۔
@Output// child: UserCardComponent
import { Component, Input } from "@angular/core";
@Component({ selector: "app-user-card", template: `<h2>{{ user.name }}</h2>` })
export class UserCardComponent {
@Input() user!: User; // receives data from the parent
@Input() showEmail = false; // with a default
}
<!-- parent passes data via property binding -->
<app-user-card [user]="currentUser" [showEmail]="true"></app-user-card>
// child emits an event the parent can listen to
import { Component, Output, EventEmitter } from "@angular/core";
@Component({
selector: "app-user-card",
template: `<button (click)="onDelete()">Delete</button>`,
})
export class UserCardComponent {
@Output() deleted = new EventEmitter<number>(); // declares an output event
onDelete() {
this.deleted.emit(this.user.id); // emit with a payload
}
}
<!-- parent listens via event binding -->
<app-user-card [user]="u" (deleted)="removeUser($event)"></app-user-card>
بچہ EventEmitter کے ذریعے emit کرتا ہے؛ والد اسے (eventName) سے bind کرتا ہے اور payload کو $event کے طور پر موصول کرتا ہے۔ بچہ کبھی بھی والد کے ڈیٹا میں براہ راست تبدیلی نہیں کرتا — یہ EventEmitter کے ذریعے emit کر کے عمل کی درخواست کرتا ہے۔
Parent ──[user]──────────────→ Child (@Input: data down)
Parent ←──(deleted)=removeUser─ Child (@Output: events up)
name = input<string>(); // signal-based @Input (newer Angular)
deleted = output<number>(); // signal-based @Output
حالیہ Angular میں signal-based input()/output() functions کو متبادل کے طور پر شامل کیا گیا ہے۔
@Input/@Output Angular میں والد-بچے کی بات چیت اور دوبارہ استعمال ہونے والے کمپوننٹس کا بنیادی حصہ ہیں — یہ one-way ڈیٹا فلو (inputs کے ذریعے نیچے، events کے ذریعے اوپر) کو نافذ کرتے ہیں جو ڈیٹا کو قابل پیش گوئی اور کمپوننٹس کو الگ تھلگ رکھتا ہے۔
اس جوڑے کو سمجھنا کسی بھی غیر معمولی Angular UI کو ترتیب دینے کے لیے ضروری ہے؛ غیر متعلقہ کمپوننٹس کے درمیان بات چیت کے لیے، آپ اس کی بجائے ایک مشترکہ service یا state library استعمال کریں۔