Create a table consisting of several components

Question

So, when I started digging through to angular2, I decided to create a table that lists people. One component for creating the table ( person-list) and one for the component for each person in the table ( person-list-item).

It's easy to blink, isn't it? With the release below, I realized that it was not so simple. As you can see, the rows of the table do not match the structure of the table.

Looking at the html in the inspector, we will also see what <person-list-item>destroys the table.

Is there a way to solve this problem, or should I just create table rows in an element <person-list>to prevent the browser from breaking the table? I assume this is a problem that applies to other cases where multiple components destroy a specific DOM element.

app.component

import {PersonListComponent} from './person-list.component';
import {Component} from 'angular2/core';

let template=`
<person-list></person-list>
`;

@Component({
    selector:'appz',
    template:template,
    providers:[PersonService],
    directives:[PersonListComponent]
})

export class AppComponent {
    public title;

    constructor(private _personService: PersonService) { 
        this.title=_personService.getPersons();
    }
}

person-list.component

import {Component} from 'angular2/core';
import {PersonListItemComponent} from './person-list-item.component';
import {Person} from './person';

let template=`
    <h3>Persons</h3>
    <table class="table">
        <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <person-list-item 
                [firstName]="'John'"
                [lastName]="'Doe'"
                [age]='44'>
            </person-list-item>
            <person-list-item 
                [firstName]="'Foo'"
                [lastName]="'Bar'"
                [age]='34'>
            </person-list-item>
        </tbody>
    </table>
`;

@Component({
    selector:'person-list',
    template:template,
    directives:[PersonListItemComponent],
    inputs:['persons']
})
export class PersonListComponent {
    public persons: Person[];
};

person-list-item.component

import {Component} from 'angular2/core';

let template=`
    <tr>
        <td>{{firstName}}</td>
        <td>{{lastName}}</td>
        <td>{{age}}</td>            
    </tr>
`;

@Component({
    selector:'person-list-item',
    template: template,
    inputs:['firstName', 'lastName', 'age']
})

export class PersonListItemComponent {
    public firstName;
    public lastName;
    public age;
}

Answer 1

selector: 'tr[person-list-item]'

<tr person-list-item>

selector: 'tr[personListItem]' <tr personListItem>

. , https://github.com/dart-lang/polymer-dart-patterns/blob/b3e8a306d05a9f3aae695a75ca5f4e3dccd64cf5/web/control_flow/using_template_repeat_with_a_table_row/my_element.html Polymer, CSS div, a table/tr/<27 >

<style>
  .table {
    display: table;
  }
  .row {
    display: table-row;
  }
  .cell {
    display: table-cell;
  }
</style>
<div class="table">
  <template is="dom-repeat" items="{{fruits}}" as="fruit">
    <div class="row">
      <div class="cell">{{fruit}}</div>
    </div>
  </template>
</div>

Answer 2

PersonListItemComponent - , PersonListComponent, <template> NgFor, .

. , <template> <table>. .

import {Component, Input} from 'angular2/core';
@Component({
  selector: 'person-list',
  template: `
    <table>
      <tbody>
        <template ngFor #person [ngForOf]="people">
          <tr>
            <td>{{person.name}}
            <td>{{person.age}}
        </template>
      </tbody>
    </table>
  `,
  styles: ['td { border: 1px solid gray } ']
})
export class PersonListComponent {
  @Input() people;
}
@Component({
  selector: 'my-app',
  template: `<person-list [people]="people"></person-list>`,
  directives: [PersonListComponent]
})
export class AppComponent {
  people = [ { name: 'Mark', age: "over 40" }, {name: 'cbass', age: "24?" }];
  constructor() { console.clear(); }
}

plunker