Creating Bootstrap table with differents Angular components

Question

I'm trying to create a Bootstrap table using two Angular components.

My code is organised as following :

componentA.html
<table class="table table-bordered">
<thead>
<tr>
  <th scope="col">#</th>
  <th scope="col">First</th>
  <th scope="col">Last</th>
  <th scope="col">Handle</th>
</tr>
</thead>
 <tbody>
  <componentB></componentB>
 </tbody>
</table>



componentB.html
<tr>
 <th scope="row">1</th>
 <td>Mark</td>
 <td>Otto</td>
 <td>mdo</td>
</tr>

The result should be like this : expected

but it's actually like this : reality

However, it works fine when I put the HTML content of componentB directly in componentA html.

Thank you for your help

Gérôme Grignon · Accepted Answer · 2019-01-03 13:51:33Z

1

You are missing the scope on tr tag : <th scope="row">1</th>

Then table element in HTML just allows thead, tbody, tfoot and tr as children.

Change your componentB selector from 'componentB' to '[componentB]'

<table class="table table-bordered">
<thead>
<tr>
  <th scope="col">#</th>
  <th scope="col">First</th>
  <th scope="col">Last</th>
  <th scope="col">Handle</th>
</tr>
</thead>
 <tbody componentB>
 </tbody>
</table>

edited Jan 3, 2019 at 13:51

answered Jan 3, 2019 at 13:30

Gérôme Grignon

4,2581 gold badge9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

FairPluto Over a year ago

You are right, I did a poor copy past and forgot that line, but my code was tested with <th scope="row">1</th> and it didn't worked

Gérôme Grignon Over a year ago

trying to fix it, the problem should be from the <componentb> not allowed as a tag into a table.

FairPluto Over a year ago

Thank you for your answer, but it's inadvised by Angular best practices to do so. (sources : angular.io/guide/styleguide#style-05-03)

Gérôme Grignon Over a year ago

Such case is covered by the exception paragraph : as you can't include non html table children tags, you can only "augment built-in elements."

Mohamed Fawas · Accepted Answer · 2019-01-03 13:47:50Z

0

<table class="table table-bordered">
<thead>
<tr>
    <th scope="col">#</th>
    <th scope="col">First</th>
    <th scope="col">Last</th>
    <th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
</tr>
</tbody>

answered Jan 3, 2019 at 13:47

Mohamed Fawas

1

1 Comment

FairPluto Over a year ago

Yeah this is working, but I need to use two differents components in order to create dynamics tables

Collectives™ on Stack Overflow

Creating Bootstrap table with differents Angular components

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related