April 2018
Beginner
536 pages
13h 21m
English
We can use the ng-content directive to <indexentry content="Angular components: directive, using">render the child of a component. For example, the following component can be used to define a row in <indexentry content=" directive:using">the application's layout. However, when we define the RowComponent, we don't know which content will be placed into the row. We use the ng-content directive to refer the yet to be known child component:
@Component({
selector: "app-row",
template: `
<div class="row">
<ng-content></ng-content>
</div>
`
})
export class RowComponent {}
The RowComponent can then be used within a template as follows:
<app-row>
<h1>Title</h1>
</app-row>
<app-row>
<h2>Subtitle</h2>
</app-row>