ng-content सह content projection म्हणजे काय?

Question

Accepted Answer

**Content projection** एका घटकाला त्याच्या मूळ घटकातून पास केलेले **मार्कअप स्वीकारू आणि रेंडर करू** देते — `` द्वारे ठेवले जाते. हे लवचीक, पुन्हा वापरण्यायोग्य wrapper घटक (card, dialog, layout) तयार करण्याचा मार्ग आहे ज्यांची अंतर्गत सामग्री ग्राहक नियंत्रित करतो. (हे Vue/web-component slots आणि React `children` साठी Angular समतुल्य आहे.) ## Single-slot projection ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` कार्ड स्टाइल केलेला wrapper प्रदान करते; मूळ घटक ठरवते की अंदर काय जाते — `@Input` द्वारे string पास करण्यापेक्षा खूप अधिक लवचीक. ## Select सह Multi-slot projection ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` `select` विशेषता (CSS selector — विशेषता, वर्ग किंवा टैग) प्रत्येक projected content ला योग्य `` slot मध्ये दिशानिर्देश करते, बहु-क्षेत्र लेआउट सक्षम करते. ## Projected content त्याचा मूळ संदर्भ टिकवून रखते ```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 घटक तयार करण्याचे मुख्य आहे — card, modal, tab, layout आणि कोणतेही "shell" जेथे ग्राहक अंतर्गत सामग्री पुरवतो. त्याशिवाय, घटक कठोर असतील (केवळ input द्वारे कॉन्फिगरेबल); `` (आणि अनेक slot साठी `select`) सह, ते लवचीक container बनतात, जे design system आणि shared component library साठी आवश्यक आहे.