Component Deep Dive
Content Projection
<ng-content> Slots
💡 Content projection ek photo frame jaisa hai — frame (component) ka apna design fixed hai, lekin ANDAR ki photo (content) tum apni marzi se daal sakte ho — same reusable frame, alag content har baar.
<ng-content></ng-content> ek "slot" define karta hai component template mein — jo bhi content PARENT ne is component ke tags ke BEECH mein likha hai, wo yaha "project" ho jaata hai. Reusable wrapper components (jaise Card, Modal, Panel) banane ke liye bahut common pattern.
// card.component.html:
// <div class="card">
// <div class="card-header">
// <ng-content select="[card-title]"></ng-content>
// </div>
// <div class="card-body">
// <ng-content></ng-content> — default slot
// </div>
// </div>
// Use karte waqt (parent mein):
// <app-card>
// <h2 card-title>My Title</h2>
// <p>Ye content card-body slot mein "project" hoga</p>
// </app-card>📥
Content projection ek photo frame jaisa hai — frame (component) ka apna design fixed hai, lekin ANDAR ki photo (content) tum apni marzi se daal sakte ho — same reusable frame, alag content har baar.
1 / 6
⚡ झट से Recap
- <ng-content> = "slot" jaha parent ka content project hota hai
- select attribute = multiple named slots
- Card/Modal/Panel jaisi reusable wrapper components ke liye common
इस page में (2 subtopics)
select attribute se multiple, SPECIFIC content areas define kar sakte ho — jaise ek Modal component jisme header, body, footer teeno alag jagah project hote hain.
// modal.component.html:
// <div class="modal">
// <header><ng-content select="[modal-header]"></ng-content></header>
// <main><ng-content></ng-content></main> — default (unlabeled) content
// <footer><ng-content select="[modal-footer]"></ng-content></footer>
// </div>
// Use:
// <app-modal>
// <h2 modal-header>Confirm Delete</h2>
// <p>Are you sure?</p>
// <button modal-footer>Cancel</button>
// <button modal-footer>Delete</button>
// </app-modal>Tip: select attribute CSS-selector-jaisa hai — [attribute], .class, ya tag-name se match kar sakte hain, jo content us criteria se match kare, us slot mein project hota hai.
Kabhi-kabhi content jo project karna hai wo khud ek component hai (jiska apna selector different hai) — ngProjectAs attribute batata hai "isse is SPECIFIC slot mein project karo", chahe uska actual tag match na kare.
// <app-child-component ngProjectAs="[modal-header]">
// ...
// </app-child-component>
// Ye <app-child-component> ko [modal-header] slot mein project karta hai,
// chahe uska khud ka selector kuch aur hoTip: Rare, advanced use-case hai — mostly tab zaroori jab tumhe ek existing component (jiska selector badal nahi sakte) ko kisi specific named slot mein fit karna ho.