Broke bootstrap layout after moving content from component to subcomponent (Angular v.11)-CodePudding

I created a simple list and worked fine. After moving the row content to other sub component, the layout broke. No extra CSS was used in main component or sub component. This is the OK layout:

<div class="container">
<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>productName</th>
            <th>companyName</th>
            <th>categoryName</th>
            <th>quantityPerUnit</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let product_item of input_productListData">
            <td><span>{{product_item.productID}}</span></td>
            <td><span>{{product_item.productName}}</span></td>
            <td><span>{{product_item.fkSupplier.companyName}}</span></td>
            <td><span>{{product_item.fkCategory.categoryName}}</span></td>
            <td><span>{{product_item.quantityPerUnit}}</span></td>
        </tr>
    </tbody>
</table>

And got this:

Now I moved the rows to other component and got this: How fix this?

CodePudding user response：

This is actually not related to bootstrap at all. When you are creating an component like that... if you inspect the template in the dev console, it should show something like...

<tr ....
  <app-product-simple-list-row....

This just comes down to that app-product-simple-list-row is not valid inside a html table.

You can overcome this by using an attribute selector instead, which would transform your template to something like...

<tr app-product-simple-list-row ...

if you were to look in the dev console. So do that instead:

Change your component selector to:

@Component({
  selector: '[app-product-simple-list-row]',
  // ...
})

and use it in the parent template like:

<tr app-product-simple-list-row *ngFor="...."></tr>