Was ist Content Projection mit ng-content?

Question

Accepted Answer

**Content Projection** ermöglicht es einer Komponente, **Markup, das von ihrer Parent-Komponente übergeben wird**, zu akzeptieren und zu rendern — über `` positioniert. Damit erstellst du flexible, wiederverwendbare Wrapper-Komponenten (Karten, Dialoge, Layouts), deren inneren Inhalt der Verbraucher kontrolliert. (Das ist Angulars Äquivalent zu Vue/Web-Component-Slots und Reacts `children`.) ## Single-Slot-Projektion ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` Die Karte liefert den gestalteten Wrapper; die Parent-Komponente entscheidet, was darin kommt — wesentlich flexibler als das Übergeben von Strings über `@Input`. ## Multi-Slot-Projektion mit select ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` Das `select`-Attribut (ein CSS-Selektor — Attribut, Klasse oder Tag) leitet jedes projizierte Content-Element zum richtigen ``-Slot weiter, was Multi-Region-Layouts ermöglicht. ## Projizierter Inhalt behält seinen ursprünglichen Kontext ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## Warum es wichtig ist Content Projection ist der Schlüssel zum Aufbau **wiederverwendbarer, zusammensetzbarer** UI-Komponenten in Angular — Karten, Modals, Tabs, Layouts und alle "Shells", bei denen der Verbraucher den inneren Inhalt bereitstellt. Ohne sie wären Komponenten starr (nur über inputs konfigurierbar); mit `` (und `select` für mehrere Slots) werden sie zu flexiblen Containern, was für Design-Systeme und gemeinsame Komponentenbibliotheken unverzichtbar ist.