CODEWITHSUNDEEP
angularjsangularangularjs-directive
mvermand
mvermand

Reputation: 6117

AngularJS equivalent for Angular ng-container

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.

Upvotes: 43

Views: 23114

Answers (3)

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38663

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

Upvotes: 0

Paweł Żurowski
Paweł Żurowski

Reputation: 448

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

Upvotes: 26

ach
ach

Reputation: 6234

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.

Upvotes: 5

Related Questions