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.

Are you using Angular(IO) or AngularJS - they are quite different . — Dale K
– Dale K, Commented Aug 21 at 6:14

Naren Murali · Accepted Answer · 2025-08-04 06:35:35Z

4

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>

edited Aug 4 at 6:35

answered Aug 4 at 6:03

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

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

2 Comments

Ginto Aug 4 at 6:22

Hey I have the same ng-container code and it seems to work fine outside the table just does not work inside the table. I am using angular 1.7.2. I don't seem to be able to use ng-for or any other variant of it. So I am not sure if I am doing something wrong.

Naren Murali Aug 4 at 6:27

@Ginto updated my answer, ng-container does not work for angularjs

traynor · Accepted Answer · 2025-08-04 08:09:14Z

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>

Collectives™ on Stack Overflow

Make ng-container work inside a HTML table

2 Answers 2

UPDATE (AngularJS alone):

Migration from AngularJS to Angular2+:

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

UPDATE (AngularJS alone):

Migration from AngularJS to Angular2+:

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related