কন্টেন্ট প্রজেকশন একটি কম্পোনেন্টকে এর প্যারেন্ট দ্বারা পাস করা মার্কআপ গ্রহণ এবং রেন্ডার করতে দেয় — <ng-content> এর মাধ্যমে স্থাপন করা হয়। এটি নমনীয়, পুনর্ব্যবহারযোগ্য র্যাপার কম্পোনেন্ট (কার্ড, ডায়ালগ, লেআউট) তৈরির উপায় যেখানে ভোক্তা অভ্যন্তরীণ কন্টেন্ট নিয়ন্ত্রণ করে। (এটি Vue/web-component slots এবং 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 কম্পোনেন্ট তৈরির চাবিকাঠি — কার্ড, মডাল, ট্যাব, লেআউট, এবং যেকোনো "শেল" যেখানে ভোক্তা অভ্যন্তরীণ কন্টেন্ট সরবরাহ করে।
ছাড়া, কম্পোনেন্টগুলি কঠোর হত (শুধুমাত্র inputs এর মাধ্যমে কনফিগারযোগ্য); <ng-content> এর সাথে (এবং একাধিক স্লটের জন্য select), তারা নমনীয় কন্টেইনার হয়ে ওঠে, যা ডিজাইন সিস্টেম এবং শেয়ার করা কম্পোনেন্ট লাইব্রেরির জন্য অপরিহার্য।