Rendering HTML Correctly In NgRepeat using Components in AngularJS 1.7

Question

I have a simple app which displays a fruit and its color inside a table. There is a table component and row component. The table component's HTML looks like this:

<table class="table table-condensed">
  <thead>
    <tr>
      <th>Fruit</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody>
    <row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits"></row-component>
  </tbody>
</table>

The row component's HTML looks like this:

<tr>
  <td>{{$ctrl.fruit.name}}</td>
  <td>{{$ctrl.fruit.color}}</td>
</tr>

As you can see, the table component has an ngRepeat directive on the row component. The problem is that rendered markup looks like this:

<table-component class="ng-isolate-scope"><!-- ngRepeat: fruit in $ctrl.fruits --><row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits" class="ng-scope ng-isolate-scope"><tr>
  <td class="ng-binding">Apple</td>
  <td class="ng-binding">Red</td>
</tr></row-component><!-- end ngRepeat: fruit in $ctrl.fruits --><row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits" class="ng-scope ng-isolate-scope"><tr>
  <td class="ng-binding">Banana</td>
  <td class="ng-binding">Yellow</td>
</tr></row-component><!-- end ngRepeat: fruit in $ctrl.fruits --><row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits" class="ng-scope ng-isolate-scope"><tr>
  <td class="ng-binding">Pear</td>
  <td class="ng-binding">Green</td>
</tr></row-component><!-- end ngRepeat: fruit in $ctrl.fruits --><table class="table table-condensed">
  <thead>
    <tr>
      <th>Fruit</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table></table-component>

The browser doesn't know how to handle the row-component tag and the table ends up looking like this:

What do I need to do to get the rows to render correctly? I have the full CodePen code here.

This question details a lot of methods you can use https://stackoverflow.com/q/49919207/5746996 — Tobin, Jan 29 '19 at 19:20
What happens if you add `transclude: true` on your component? — Lex, Jan 29 '19 at 19:59
Setting transclude to true doesn't do anything. I tried that earlier hoping it would. — Halcyon, Jan 29 '19 at 21:09

score 2 · Accepted Answer · answered Jan 29 '19 at 19:17

2

A simple solution would be to convert your component to a directive and add it to a tr element as an attribute

<table class="table table-condensed">
  <thead>
    <tr>
      <th>Fruit</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody>
    <tr row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits"></tr>
  </tbody>
</table>

NOTE: i left the name of the component as is to be better understandable in your example, it would be better if you changed it to something more appropriate than row-component since it is not a component anymore.

answered Jan 29 '19 at 19:17

Haris Bouchlis

2,366
1
20
35

2

it's good answer if in row-component you remove the `tr` and just use `td` – Maher Jan 29 '19 at 19:31
also you can rename row-component to `tr` it work too. – Maher Jan 29 '19 at 19:34
@Maher call components are suppose to contain at least 1 hyphen according to the standard in order to prevent the attempted override of native html elements. – Fallenreaper Jan 29 '19 at 20:54
After doing some research, I concluded that transclusion is best used with directives rather than components. – Halcyon Jan 30 '19 at 22:16

Rendering HTML Correctly In NgRepeat using Components in AngularJS 1.7

1 Answers1