Learning TypeScript 2.x - Second Edition

Using the <ng-content> directive

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>