Angular 2 Content, Content Projection, Transclusion

Live Demo
Github Repo

I guess under all these fancy words (especially Transclusion), there is a simple concept. And it seems to me, it is way easier to learn it by starting with looking at a working sample, make some changes and observe the changes.

I have created a bare minimum working example here: https://github.com/huguogang/ng2tsdemo/blob/master/content.html

Here are the key code fragments. Related elements are color coded.
Template for the directive:

<div>
  <h1><ng-content select="my-title"></ng-content></h1>
  <div>
    <ng-content select="content"></ng-content>
  </div>
  <br/>
  <em style="font-size:smaller"><ng-content select="footer"></ng-content></em>
</div>

Markup in the client component:

<multi-slot-content>
  <my-title>Angular 2 Content Demo</my-title>
  <content>The selectors defined in MultiSlotContent directive will find 
    the content element in this template, insert it into it's own template 
    section.</content>
  <footer>Footer: this feature was called transclusion in Angular 1.</footer>
</multi-slot-content>

Resulting HTML Markup:

<multi-slot-content>
  <div>
    <h1><my-title>Angular 2 Content Demo</my-title></h1>
    <div>
      <content>The selectors defined in MultiSlotContent directive will find 
        the content element in this template, insert it into it's own template 
        section.</content>
    </div>
    <br>
    <em style="font-size:smaller"><footer>Footer: this feature was called transclusion in Angular 1.</footer></em>
  </div>
</multi-slot-content>

Notice the key is to define proper Angular 2 selectors in the directive. Then in the client component, it just need to fill the content in the right selector target. The end result is the directive's ng-content elements got replaced by the fragments from client.