[Angular 2] Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)

You can place content inside of the instance of your component element then manage it inside of the component’s template using ng-content. This process is called reprojection, but you may be more familiar with the term “transclusion”.

 

Home:

<div>I am home component</div>

<widget-two>
    <widget-one [message]="simpleService.message"></widget-one>
</widget-two>
<widget-two>
    This is also widget two
</widget-two>

 

widget-two:

import { Component, OnInit } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'widget-two',
    templateUrl: 'widget-two.component.html'
})
export class WidgetTwoComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
    
}

<h2>Above</h2>
<ng-content></ng-content>
<h2>Below</h2>