When using ngFor in Angular 2, is it possible to not wrap component content with component selector tag?

Question

I'm trying to display table of users. Every <tr> tag is described by UserRowComponent :

@Component({
   selector: 'user-row',
   template: `
       <tr>
           <td>{{ user.first_name }}</td>
           <td>{{ user.last_name }}</td>
       </tr>
   `
})

For loop over users I'm using:

<tr>
   <!-- head of tabe -->
   <th>...<th>
   ....
</tr>
<user-row *ngFor="let user of users" [user]="user">

But as a result I get table with multiple <user-row></user-row> tags with <tr> tag inside.

There is a solution - set selector property to something like tr.user-row and remove wrpapping <tr> tag from <user-row> template.

But what if I need to show list of orders for each user in the same table, right after <user-row> like this:

<tr>...user-1 row...</tr>
<tr>
    <td>Order id</td>
    <td>Order date</td>
    <td>Order amount</td>
</tr>
<tr>...user-1 order-1 row ...</tr>
<tr>...user-1 order-2 row ...</tr>
<!-- user-2 with orders
     user-3 with orders
     etc.
-->

So it would be great to use *ngFor to display only content from template property, withot wrapping with selector tag. The template of component would be written in this way:

@Component({
   selector: 'user-row',
   template: `
       <tr>
           <td>{{ user.first_name }}</td>
           <td>{{ user.last_name }}</td>
       </tr>
       <user-orders-list [orders]="user.orders">
   `
})

And template of <user-order-list> :

@Component({
   selector: 'user-row',
   template: `
       <tr>
           <td>Order id</td>
           <td>Order date</td>
           <td>Order amount</td>
       </tr>
      <user-order-row *ngFor="let order of orders" [order]="order">
   `
})

Template for <user-order-row> :

@Component({
   selector: 'user-order-row',
   template: `
       <tr>
           <td>{{ order.id }}</td>
           <td>{{ order.date }}</td>
           <td>{{ order.amount }}</td>
       </tr>
   `
})

Answer 1

You can utilize the template tag here. Style and format the way you want, of course. This probably won't make sense, so I forked and modified a plunk for you.

<table>
      <template let-user ngFor [ngForOf]="users">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th></th>
          </tr>
        </thead>
        <tr>
          <td>{{user.firstName}}</td>
          <td>{{user.lastName}}</td>
          <td></td>
        </tr>
        <tr>
          <th>ID</th>
          <th>Date</th>
          <th>Amount</th>
        </tr>
        <tr *ngFor="let order of user.orders">
          <td>{{order.id}}</td>
          <td>{{order.date}}</td>
          <td>{{order.amount}}</td>
        </tr>
      </template>
    </table>