ChildComponent
like:{{ childContent }}
to any HTML that provided to ChildComponent
? One tempting idea is to define an @Input
containing the text, but what if you wanted to provide styled HTML, or other components? Trying to handle this with an @Input
can get messy quickly, and this is where content projection comes in. Components by default support projection, and you can use the ngContent
directive to place the projected content in your template.ChildComponent
to use projection:app/child/child.component.ts
ChildComponent
in the template:app/app.component.html
<rio-child>
, to place inside of <ng-content></ng-content>
.ChildComponent
does not need to know about or care what is being provided.<ng-content></ng-content>
and want to specify the position of the projected content to certain ng-content
? For example, for the previous ChildComponent
, if we want to format the projected content into an extra header
and footer
section:app/child-select.component.html
<header>
to specify the position of projected content to the ng-content
with select="header"
:app/app.component.html
ng-content
through css class:app/app.component.html