Html Table In Conflict With Angular Component Header And Component Body

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

Solution 1:

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

Solution 2:

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

Share