title: Create table composed by multiple components
body: <p>So, as I started to dig in to angular2, I figured I create a table listing persons. One component for creating the table (<code>person-list</code>), and one for component for each person in the table (<code>person-list-item</code>). </p>
  
  <p>Easy peezy, right? With the below output I realised it was not that easy. As you can see, the table rows are not following the table structure.</p>
  
  <p><a href="https://i.stack.imgur.com/OOAx4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OOAx4.png" alt="enter image description here"></a></p>
  
  <p>By viewing the html in the inspector we can also see that the <code>&lt;person-list-item&gt;</code> is ruining the table. </p>
  
  <p><a href="https://i.stack.imgur.com/XB0bj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XB0bj.png" alt="enter image description here"></a></p>
  
  <p>Is there a way to solve this problem, or should I just create the table rows in the <code>&lt;person-list&gt;</code> element in order to not let the browser ruin the table? I guess this is an issue that applies to other cases where multiple components would ruin a certain DOM element.</p>
  
  <p><code>app.component</code></p>
  
  <pre><code>import {PersonListComponent} from './person-list.component';
  import {Component} from 'angular2/core';
  
  let template=`
  &lt;person-list&gt;&lt;/person-list&gt;
  `;
  
  @Component({
      selector:'appz',
      template:template,
      providers:[PersonService],
      directives:[PersonListComponent]
  })
  
  export class AppComponent {
      public title;
  
      constructor(private _personService: PersonService) { 
          this.title=_personService.getPersons();
      }
  }
  </code></pre>
  
  <p><code>person-list.component</code></p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {PersonListItemComponent} from './person-list-item.component';
  import {Person} from './person';
  
  let template=`
      &lt;h3&gt;Persons&lt;/h3&gt;
      &lt;table class="table"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Firstname&lt;/th&gt;
                  &lt;th&gt;Lastname&lt;/th&gt;
                  &lt;th&gt;Age&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;person-list-item 
                  [firstName]="'John'"
                  [lastName]="'Doe'"
                  [age]='44'&gt;
              &lt;/person-list-item&gt;
              &lt;person-list-item 
                  [firstName]="'Foo'"
                  [lastName]="'Bar'"
                  [age]='34'&gt;
              &lt;/person-list-item&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  `;
  
  @Component({
      selector:'person-list',
      template:template,
      directives:[PersonListItemComponent],
      inputs:['persons']
  })
  export class PersonListComponent {
      public persons: Person[];
  };
  </code></pre>
  
  <p><code>person-list-item.component</code></p>
  
  <pre><code>import {Component} from 'angular2/core';
  
  let template=`
      &lt;tr&gt;
          &lt;td&gt;{{firstName}}&lt;/td&gt;
          &lt;td&gt;{{lastName}}&lt;/td&gt;
          &lt;td&gt;{{age}}&lt;/td&gt;            
      &lt;/tr&gt;
  `;
  
  @Component({
      selector:'person-list-item',
      template: template,
      inputs:['firstName', 'lastName', 'age']
  })
  
  export class PersonListItemComponent {
      public firstName;
      public lastName;
      public age;
  }
  </code></pre>