Apa itu proyeksi konten dengan ng-content?

Question

Accepted Answer

**Proyeksi konten** memungkinkan komponen untuk menerima dan merender **markup yang diteruskan oleh induknya** — ditempatkan melalui ``. Ini adalah cara Anda membangun komponen pembungkus yang fleksibel dan dapat digunakan kembali (kartu, dialog, tata letak) yang konten internalnya dikontrol oleh konsumen. (Ini adalah setara Angular untuk slot Vue/web-component dan `children` React.) ## Proyeksi slot tunggal ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` Kartu menyediakan pembungkus bergaya; induk memutuskan apa yang masuk — jauh lebih fleksibel daripada meneruskan string melalui `@Input`. ## Proyeksi multi-slot dengan select ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` Atribut `select` (pemilih CSS — atribut, kelas, atau tag) merutekan setiap bagian konten yang diproyeksikan ke slot `` yang tepat, memungkinkan tata letak multi-wilayah. ## Konten yang diproyeksikan mempertahankan konteks aslinya ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## Mengapa ini penting Proyeksi konten adalah kunci untuk membangun komponen UI yang **dapat digunakan kembali dan dapat dikomposisi** di Angular — kartu, modal, tab, tata letak, dan "shell" apa pun di mana konsumen menyediakan konten internal. Tanpanya, komponen akan kaku (hanya dapat dikonfigurasi melalui input); dengan `` (dan `select` untuk beberapa slot), mereka menjadi wadah fleksibel, yang penting untuk sistem desain dan perpustakaan komponen bersama.