[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 have been brought into Angular 2 and is renamed to content projection and given super powers.

In this lesson learn what to the Setup content projection and upgrade it to support multiple projections with encapsulated Func Tionality.

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

 <ng-content  Select= ". Header"></ng-content > <Divclass= "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>

[Angular 2] Share template Content in another template with content Projection <ng-content>