Make ng-container work inside a HTML table

Question

The ng-container does not work with ng-repeat inside a table.

This is my code.

<tbody>
     <tr>
        <ng-container  style="border-bottom: 5px solid black" ng-repeat="ca in cas">
            <td ng-click="test(ca)">works   {{ca.property}}</td>
        </ng-container>
    </tr>
</tbody>

This code will not work. But if I switch the ng-container to a td element this code will work fine with no changes. The problem is ca is undefined inside ng-container but works inside a td element.

Answer 1

UPDATE (AngularJS alone):

If you are using AngularJS only, then we can just add the ng-repeat on the td element, ng-container will not work in an Angular JS environment. It is exclusive only to Angular 2+ framework.

<tbody>
     <tr>
          <td ng-repeat="let ca of cas" ng-click="test(ca)">works   {{ca.property}}</td>
    </tr>
</tbody>

---

Migration from AngularJS to Angular2+:

You are mixing Angular and AngularJS, ng-container is an Angular 2+ element, so you need to use *ngFor or @for to achieve the looping.

<tbody>
     <tr>
        <ng-container  style="border-bottom: 5px solid black" *ngFor="let ca of cas">
                <td (click)="test(ca)">works   {{ca.property}}</td>
        </ng-container>
    </tr>
</tbody>

When using *ngFor make sure you import CommonModule or NgFor directive from @angular/common on either the module the component belongs to (Modular approach) or the imports array of the standalone component.

---

Or Using @for (Angular 17+):

<tbody>
     <tr>
        @for(ca of cas;track $index) {
          <td (click)="test(ca)">works   {{ca.property}}</td>
        }
    </tr>
</tbody>

Answer 2

ng-container doesn't exist in AngularJS, so it's being displayed as a custom element here.

However, ng-repeat creates custom ng-container element, but as you're inside table, non-table elements are not allowed, so the browser removes them outside of table, but also strips tds, and ng-containers remain as empty elements outside the table, which is why it doesn't seem to work inside table, but works outside.

So, as in table you can only use table elements, ng-container cannot work in HTML table, instead, use ng-repeat on table cell:

<td  ng-repeat="ca in cas" ng-click="test(ca)">works   {{ca.property}}</td>

Also, for styling you can use inner element in td, for example:

<td ng-repeat="ca in cas">
    <span style="border-bottom: 5px solid black" ng-click="test(ca)">works   {{ca.property}}</span>
</td>