کیا @Input اور @Output کمپوننٹ کمیونیکیشن کو کیسے فعال کرتے ہیں؟

Question

Accepted Answer

`@Input` اور `@Output` والد اور بچے کے کمپوننٹ کے درمیان بات چیت کا معیاری طریقہ ہیں: **`@Input`** ڈیٹا *نیچے* منتقل کرتا ہے (والد → بچہ)، اور **`@Output`** ایونٹس *اوپر* بھیجتا ہے (بچہ → والد)۔ یہ عام "props نیچے، events اوپر" کے نمونے کی نقل کرتا ہے۔ ## @Input — ڈیٹا نیچے بہتا ہے ```ts // child: UserCardComponent import { Component, Input } from "@angular/core"; @Component({ selector: "app-user-card", template: `

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