[Angular 2] Share Template Content In Another Template With Content Projection <ng-content>

Angular 1 provided a mechanism to place content from your template inside of another template called transclusion. This concept has been brought into Angular 2 and was renamed to content projection and given super powers.

In this lesson learn how to setup content projection and upgrade it to support multiple projections with encapsulated functionality.

 

ng-content, just like Angular1 transclude, in ng-content, you can add 'select' attr to do content projection:

<ng-content select=".header"></ng-content>
<div class="result-list">
    <md-list >
      <md-list-item *ngFor="let item of searchResult">
        {{item}}
      </md-list-item>
      <md-list-item *ngIf="searchResult?.length === 0">No result...</md-list-item>
      <md-list-item *ngIf="!searchResult">List here...</md-list-item>
    </md-list>
</div>
<ng-content select="footer"></ng-content>

 

Using:

<result-list [keys]="items" [urls]="urls" class="list">
  <div class="header">Search result: </div>
  <footer>End...</footer>
</result-list>