How can I build a component that generates HTML based on this data and HTML code? The <head> and <tbody> sections are projected, and I understand how to project multiple elements. However, I am unsure of how to repeat the projected <tr> in the body. In Angular 1, selectively compiling elements and binding them was simple. Even manually tracking copies with a simplified clone of ngRepeat was straightforward. I have successfully created a working Angular 1 directive for this, but I am struggling to translate it to Angular 2. In Angular 1, because of how parts of the table are selectively compiled, you can apply directives to the <thead> and its children, as well as the <tbody>. Anything placed on any of the children of <tbody> will be repeated and compiled for each element in the passed array.
JSON
[
{name: "bob", number: "555-1234"},
{name: "fred", number: "555-1235"},
{name: "joe", number: "555-1236"}
]
HTML
<table sortable="person in people">
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{person.name}}</td>
<td>{{person.number}}</td>
</tr>
</tbody>
</table>
Result
<table sortable="person in people">
<thead>
<tr><th>Name</th><th>Number</th></tr>
</thead>
<tbody>
<tr>
<td>bob</td>
<td>555-1234</td>
</tr>
<tr>
<td>fred</td>
<td>555-1235</td>
</tr>
<tr>
<td>joe</td>
<td>555-1236</td>
</tr>
</tbody>
</table>
The sortable attribute can either be [sortable] or *sortable.