ng-content کے ساتھ content projection کیا ہے؟

Question

Accepted Answer

**Content projection** ایک component کو اپنے **parent کے ذریعے منتقل کی گئی markup کو قبول اور render کرنے دیتا ہے** — `` کے ذریعے رکھی جاتی ہے۔ یہ لچکدار، دوبارہ استعمال کے قابل wrapper components (cards، dialogs، layouts) بنانے کا طریقہ ہے جن کا اندرونی مواد consumer کنٹرول کرتا ہے۔ (یہ Angular کا Vue/web-component slots اور React کے `children` کے برابر ہے۔) ## Single-slot projection ```ts // card.component.ts @Component({ selector: "app-card", template: `

`, }) export class CardComponent {} ``` ```html

Title

Any content I want!

``` Card styled wrapper فراہم کرتا ہے؛ parent یہ فیصلہ کرتا ہے کہ اندر کیا جائے — strings کو `@Input` کے ذریعے منتقل کرنے سے بہت زیادہ لچکدار۔ ## Multi-slot projection with select ```ts @Component({ selector: "app-panel", template: `

`, }) export class PanelComponent {} ``` ```html

My Panel

Main body content

``` `select` attribute (ایک CSS selector — attribute، class، یا tag) ہر projected content کے حصے کو صحیح `` slot میں منتقل کرتا ہے، multi-region layouts کو فعال بناتا ہے۔ ## Projected content اپنا اصل context برقرار رکھتا ہے ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## یہ کیوں اہم ہے Content projection Angular میں **دوبارہ استعمال کے قابل، composable** UI components بنانے کی کلید ہے — cards، modals، tabs، layouts، اور کوئی بھی "shell" جہاں consumer اندرونی مواد فراہم کرتا ہے۔ اس کے بغیر، components سخت ہوتے (صرف inputs کے ذریعے قابل تشکیل)؛ `` (اور multiple slots کے لیے `select`) کے ساتھ، یہ لچکدار containers بن جاتے ہیں، جو design systems اور shared component libraries کے لیے ضروری ہے۔