0

Im trying to make from scratch a table in angular. I want that my header and body be dynamic.

<my-datatable>
  <my-header header></my-header>
  <my-body body></my-body>
</my-datatable>

and my header component is

<thead >
  <tr>
      <th style="text-align: left;"   *ngFor="let field of fields | async ">
        {{ field  }}
      </th>
  </tr>
</thead>

my body component is

<tbody>
  <tr *ngFor="let item of items | async ; let rowIndex = index; " > 
      <td *ngFor="let field of fields | async; let colIndex = index;" >
        {{ item[field] }}
      </td>
    </tr>
</tbody>

my datatble component

<table>
      <ng-content select="[header]"></ng-content>
      <ng-content select="[body]"></ng-content>
</table>

The table is displayed but is showed like two tables, even when I inspect just show one table.

this is a plnkr with the example

titusfx
  • 1,896
  • 27
  • 36

2 Answers2

6

I think I'm a little late to the party, but for anyone else who found this post via Google, here is a cleaner solution that does not involve changing the CSS.

Try an attribute selector in place of an element selector. In short, change:

selector: "my-head"

to 

selector: "[myHead]"

and modify the template to not include thead or tbody.

Then when you'd like to use the component, instead of 

<my-head></my-head>

use 

<thead myHead>...</thead>

Here is a link to a modified version of the original plunker with the modified change https://plnkr.co/edit/tIXePumNbA3iqTmCd8vK?p=preview

This post may also be of interest Remove the host HTML element selectors created by angular component

Birches
  • 81
  • 1
  • 5
0

You will fix you problem setting the tag table with style="display:grid"

<table style="display:grid">

In any case you will need to sync your headers with your body "manually"

This is the solution, if you delete the the grid you will have your problem

titusfx
  • 1,896
  • 27
  • 36
  • 1
    its look like i need to do it. but should not the tag be like an empty tag? –  Aug 09 '17 at 16:45
  • 1
    @Methescripter yep, it should. If you delete the components tag the css fix it self. I believe that the behavior is not the correct one. – titusfx Aug 09 '17 at 16:47