AngularJS equivalent for Angular ng-container

Question

Is here an AngularJS equivalent for Angular ng-container?

Or should I create something myself with a transclude directive?

---

Example use cases:

1. Tables with interlaced pairs, triples etc. of cells:

   <table><tr>
     <ng-container ng-repeat="item in items">
       <td>{{ item.a }}</td>
       <td>{{ item.b }}</td>
     </ng-container>
   </tr></table>
   

   There should not be additional level in the DOM tree, and instead <td>s should be direct children of <tr> element.

2. There is similar problem with HTML lists, especially the definiton list where <dt> / <dd> elements should be direct children of <dl> while they usually exist in pairs.

3. Table-like arrangement of data with display:grid:

   <div style="display: grid; grid-template-columns: auto auto">
       <ng-container ng-repeat="item in items">
           <div>{{ item.a }}</div>
           <div>{{ item.b }}</div>
       </ng-container>
   </div>
   

   This case is even more problematic as the container element existing in DOM tree causes the whole layout to break, as it is rendered as the cell instead of its children.

Solution 1

In cases you have mentioned, you can use ng-repeat-start and ng-repeat-end pair, respectively:

1. Tables with interlaced pairs, triples etc. of cells:

   <table><tr>
     <td ng-repeat-start="item in items">{{ item.a }}</td>
     <td ng-repeat-end>{{ item.b }}</td>
   </tr></table>
   

2. HTML lists:

   <dl>
     <dt ng-repeat-start="item in items">{{ item.term }}</dt>
     <dd ng-repeat-end>{{ item.definition }}</dd>
   </dl>
   

3. Table-like arrangement of data with display:grid:

   <div style="display: grid; grid-template-columns: auto auto">
     <div ng-repeat-start="item in items">{{ item.a }}</div>
     <div>{{ item.b }}</div>
     <div ng-repeat-end>{{ item.c }}</div>
   </div>
   

You can read about this in API reference: https://docs.angularjs.org/api/ng/directive/ngRepeat#special-repeat-start-and-end-points

Solution 2

Unfortunately in AngularJS ng-repeat, ng-if, etc must be used on an HTML element that will be present in the markup. Depending on the exact use-case you could try using an element directive with replace: true.

Solution 3

You can use the same ng-container in both Angularjs and Angular-2 as well. But in angular-2 have an additional option is ng-template which is act as ng-container