@Input और @Output component communication को कैसे सक्षम बनाते हैं?

Question

Accepted Answer

`@Input` और `@Output` parent और child component के बीच संवाद का मानक तरीका हैं: **`@Input`** data को *नीचे* भेजता है (parent → child), और **`@Output`** events को *ऊपर* भेजता है (child → parent)। यह सार्वभौमिक "props down, events up" pattern को दर्शाता है। ## @Input — data नीचे की ओर बहता है ```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 ``` Child एक `EventEmitter` के माध्यम से emit करता है; parent उससे `(eventName)` के साथ bind होता है और payload को `$event` के रूप में प्राप्त करता है। Child कभी भी parent के data को सीधे संशोधित नहीं करता — वह emit करके action का *अनुरोध* करता है। ## संपूर्ण pattern ```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 में parent-child communication और reusable components का मूल हैं — ये one-way data flow को लागू करते हैं (inputs के माध्यम से नीचे, events के माध्यम से ऊपर) जो data को predictable और components को decoupled रखता है। इस जोड़ी को समझना किसी भी गैर-तुच्छ Angular UI को compose करने के लिए आवश्यक है; असंबंधित components के बीच संवाद के लिए, आप इसके बजाय एक shared service या state library का उपयोग करेंगे।