Ce este proiectarea de conținut cu ng-content?

Question

Accepted Answer

**Proiectarea de conținut** permite unei componente să accepte și să redeze **markup transmis de componenta ei părinte** — plasat prin ``. Aceasta este modul în care construiești componente wrapper flexibile și reutilizabile (carduri, dialoguri, mise en page) al căror conținut interior este controlat de consumator. (Este echivalentul Angular al slot-urilor din Vue/web-component și al `children` din React.) ## Proiectare cu slot unic ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` Cardurile furnizează wrapper-ul stilizat; componenta părinte decide ce merge în interior — mult mai flexibil decât transmiterea string-urilor prin `@Input`. ## Proiectare multi-slot cu select ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` Atributul `select` (un selector CSS — atribut, clasă sau tag) direcționează fiecare bucată de conținut proiectat către slot-ul `` corect, permițând mise en page cu mai multe regiuni. ## Conținutul proiectat își păstrează contextul original ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## De ce conteaza Proiectarea de conținut este cheia pentru construirea componentelor UI **reutilizabile și compozabile** în Angular — carduri, modale, tabulatoare, mise en page și orice "înveliș" în care consumatorul furnizează conținutul interior. Fără aceasta, componentele ar fi rigide (configurabile doar prin inputuri); cu `` (și `select` pentru mai multe slot-uri), ele devin containere flexibile, ceea ce este esențial pentru sisteme de design și biblioteci de componente partajate.