ViewChild اور ContentChild میں کیا فرق ہے؟

Question

Accepted Answer

دونوں child elements/components کے حوالہ جات کے لیے query کرتے ہیں، لیکن وہ **مختلف جگہوں پر** دیکھتے ہیں: **`@ViewChild`** component کے *اپنے template* میں query کرتا ہے، جبکہ **`@ContentChild`** اس content میں query کرتا ہے جو `` کے ذریعے component میں **projected** ہو۔ ## @ViewChild — اپنے template کو query کریں ```ts @Component({ template: ` `, }) export class ParentComponent implements AfterViewInit { @ViewChild("nameInput") input!: ElementRef; // by template ref @ViewChild(ChildComponent) child!: ChildComponent; // by component type ngAfterViewInit() { this.input.nativeElement.focus(); // available after the VIEW initializes this.child.doSomething(); // call a child component's method } } ``` `@ViewChild` ان elements/components تک رسائی حاصل کرتا ہے جو component خود اپنے template میں declare کرتا ہے — **`ngAfterViewInit`** میں دستیاب ہے۔ ## @ContentChild — projected content کو query کریں ```ts @Component({ selector: "app-card", template: `

`, // content projected here }) export class CardComponent implements AfterContentInit { @ContentChild(CardTitleComponent) title!: CardTitleComponent; ngAfterContentInit() { // the projected content is ready here (EARLIER than ngAfterViewInit) console.log(this.title); } } ``` ```html

Hello

``` `@ContentChild` اس content تک رسائی حاصل کرتا ہے جو **parent نے بھیجا ہے** (جو `` کے ذریعے projected ہے) — **`ngAfterContentInit`** میں دستیاب ہے۔ ## اہم امتیاز ```text @ViewChild → elements in THIS component's own template → ngAfterViewInit @ContentChild → elements PROJECTED in from the parent → ngAfterContentInit (plural: @ViewChildren / @ContentChildren return a QueryList of all matches) ``` ## Plural versions ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## جدید signal queries ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## یہ کیوں اہم ہے `@ViewChild` (آپ کا template) اور `@ContentChild` (projected content) میں فرق کرنا — اور ان کے متعلقہ lifecycle timings (`ngAfterViewInit` بمقابلہ `ngAfterContentInit`) — ضروری ہے جب قابل استعمال components بناتے ہوئے جو اپنے template elements یا اس content کے ساتھ interact کرنے کی ضرورت ہو جو consumers ان میں project کرتے ہوں۔ یہ confusion کا ایک عام نقطہ ہے اور component libraries، tabs، form controls، اور wrappers کی تخلیق میں ایک بار بار آنے والی ضرورت ہے جو child elements کے ساتھ coordinate کرنے کے لیے ضروری ہیں۔