Render dynamic markup in component template

Question

Suppose I have

@Component({
  selector: "widget",
  template: `
<div class="container">
<div class="header"></div>
<!--body-->
<div class="footer"></div>
</div>`
})

Now I'd like to use this component like this

<widget>
<!-- h3 and p will be rendered between header and footer divs-->
<h3>foo</h3>
<p>bar</p>
</widget>

Is there a way to achieve that in angular 2?

Answer 1

Add <ng-content></ng-content>

@Component({
  selector: "widget",
  template: `
<div class="container">
<div class="header"></div>
<ng-content></ng-content>
<div class="footer"></div>
</div>`
})

to get the passed children projected to that position.