ng-content cho phép parent truyền markup vào layout của child component, tương tự slot.
Ví dụ card có slot tiêu đề và nội dung:
html
<header><ng-content select="[card-title]" /></header>
<section><ng-content /></section>html
<app-card>
<h2 card-title>Profile</h2>
<app-profile />
</app-card>Dùng khi xây component wrapper như card, modal, tabs, layout shell, nơi child quyết định khung còn parent quyết định nội dung.
Tránh API slot quá phức tạp nếu component chỉ cần vài input đơn giản.
ng-content lets a parent pass markup into a child component layout, similar to slots.
Example card with title and body slots:
html
<header><ng-content select="[card-title]" /></header>
<section><ng-content /></section>html
<app-card>
<h2 card-title>Profile</h2>
<app-profile />
</app-card>Use it for wrapper components such as cards, modals, tabs or layout shells, where the child controls the frame and the parent controls the content.
Avoid overly complex slot APIs when a component only needs a few simple inputs.