Wat is content projection met ng-content?

Question

Accepted Answer

**Content projection** stelt een component in staat om **markup doorgegeven door de parent** te accepteren en weer te geven — geplaatst via ``. Dit is hoe je flexibele, herbruikbare wrapper-componenten bouwt (kaarten, dialogen, layouts) waarvan de interne inhoud door de consumer wordt bepaald. (Het is Angulars equivalent van Vue/web-component slots en Reacts `children`.) ## Single-slot projection ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` De kaart biedt de gestylde wrapper; de parent bepaalt wat erin gaat — veel flexibeler dan strings doorgeven via `@Input`. ## Multi-slot projection met select ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` Het `select`-attribuut (een CSS-selector — attribuut, klasse of tag) routeert elk stuk geprojecteerde inhoud naar het juiste ``-slot, waardoor multi-regio-layouts mogelijk worden. ## Geprojecteerde inhoud behoudt zijn oorspronkelijke context ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## Waarom het belangrijk is Content projection is de sleutel tot het bouwen van **herbruikbare, composable** UI-componenten in Angular — kaarten, modalen, tabs, layouts en elke "shell" waar de consumer de interne inhoud levert. Zonder het zouden componenten rigide zijn (alleen configureerbaar via inputs); met `` (en `select` voor meerdere slots) worden ze flexibele containers, wat essentieel is voor design systems en gedeelde component libraries.