कंटेंट प्रोजेक्शन एक घटक को अपने माता-पिता द्वारा पारित मार्कअप को स्वीकार और प्रस्तुत करने दे — <ng-content> के माध्यम से रखा गया। यह कैसे आप लचीले, पुनर्प्रयोज्य रैपर घटक (कार्ड, डायलॉग, लेआउट) बनाते हैं जिसके आंतरिक सामग्री उपभोक्ता नियंत्रित करता है। (यह Vue/वेब-घटक स्लॉट्स और React के children के Angular के बराबर है।)
// card.component.ts
@Component({
selector: "app-card",
template: `
<div class="card">
<ng-content></ng-content> <!-- parent's content is projected here -->
</div>
`,
})
export class CardComponent {}
<!-- parent: anything between the tags is projected into <ng-content> -->
<app-card>
<h2>Title</h2>
<p>Any content I want!</p>
</app-card>
कार्ड स्टाइल किया हुआ रैपर प्रदान करता है; माता-पिता तय करता है कि अंदर क्या जाता है — @Input के माध्यम से स्ट्रिंग पास करने की तुलना में कहीं अधिक लचीला।
@Component({
selector: "app-panel",
template: `
<header><ng-content select="[panel-header]"></ng-content></header>
<main><ng-content></ng-content></main> <!-- default slot -->
<footer><ng-content select="[panel-footer]"></ng-content></footer>
`,
})
export class PanelComponent {}
<app-panel>
<h1 panel-header>My Panel</h1> <!-- goes to the header slot -->
<p>Main body content</p> <!-- goes to the default slot -->
<button panel-footer>OK</button> <!-- goes to the footer slot -->
</app-panel>
select विशेषता (एक CSS चयनकर्ता — विशेषता, वर्ग, या टैग) प्रत्येक प्रोजेक्ट की गई सामग्री को सही <ng-content> स्लॉट में भेजता है, मल्टी-क्षेत्र लेआउट सक्षम करता है।
Projected content is created in the PARENT's context — its bindings, methods,
and lifecycle belong to the parent, not the wrapper component.
कंटेंट प्रोजेक्शन Angular में पुनर्प्रयोज्य, समग्र UI घटक बनाने की कुंजी है — कार्ड, मोडल, टैब, लेआउट, और कोई भी "शेल" जहां उपभोक्ता आंतरिक सामग्री प्रदान करता है।
इसके बिना, घटक कठोर होते (केवल इनपुट के माध्यम से कॉन्फ़िगर करने योग्य); <ng-content> के साथ (और कई स्लॉट्स के लिए select), वे लचीले कंटेनर बनते हैं, जो डिज़ाइन सिस्टम और साझा घटक लाइब्रेरी के लिए आवश्यक है।