CODEWITHSUNDEEP
angulartwitter-bootstrap
FairPluto
FairPluto

Reputation: 737

Creating Bootstrap table with differents Angular components

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

Upvotes: 0

Views: 102

Answers (2)

G&#233;r&#244;me Grignon
G&#233;r&#244;me Grignon

Reputation: 4228

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>

Upvotes: 1

Mohamed Fawas
Mohamed Fawas

Reputation: 1

<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>

Upvotes: 0

Related Questions