[Angular 2] Select From Multiple Nested Angular 2 Elements

You have complete control over the elements you nest inside of your component instance by using selectors to access and rearrange them. Selecting allows you reconstruct the elements in whatever order you like so you can visual customize the content passed in.

 

You can pass multi elmenents into ng-content:

home.ts:

@Component({
    selector: 'home',
    template: `
<widget-two>

<h2>Title</h2>
<div>Some content</div>
<h3>Footer</h3>

</widget-two>
`
})

 

widget-two.ts:

@Component({
    selector: 'widget-two',
    styles:[`
:host{
    display: block;
    border: 3px solid red;
}
`],
    template: `
<h2>Above</h2>
<ng-content ></ng-content>
<h2>Below</h2>
`
})

So all three element will be passed into ng-content:

<h2>Title</h2>
<div>Some content</div>
<h3>Footer</h3>

 

ng-content can add "select" attr, you can use "element tag", "attr", "class / id":

@Component({
    selector: 'home',
    template: `
<widget-two>

<h2 header>Title</h2>  <!-- attr -->
<div class="content">Some content</div>  <!-- class -->
<h3>Footer</h3>  <!-- tag -->

</widget-two>
`
})

@Component({
    selector: 'widget-two',
    styles:[`
:host{
    display: block;
    border: 3px solid red;
}
`],
    template: `
<h2 >Above</h2>
<ng-content select="h3"></ng-content> <!-- tag h3 --> footer-->
<ng-content select="[header]"></ng-content> <!--attr h2 --> Title -->
<ng-content select=".content"></ng-content> <!-- class--->
<h2>Below</h2>
`
})