How to use a child template inside a custom table component to display each row?

Question

I've tried so many things and failed that my code ended up being a total mess. I'm open to anything but, in case you want a base:

The most promising approach I found was the following, but failed with the exception "templateRef.createEmbeddedView is not a function":

app.component.html

<br>

<mt-table [fields]="userFields" [(rows)]="users" [pageSize]="10" [searchString]="searchString"
          class="round">

  <template let-row="row">
    <td>
      {{ row.name }}
    </td>
    <td>
      <i class="fa fa-{{ row.gender === 'male' ? 'mars' : 'venus' }}"></i>
    </td>
    <td>
      {{ row.email }}
    </td>
    <td>
      {{ row.phone }}
    </td>
    <td>
      {{ row.address.number }}
    </td>
    <td>
      {{ row.address.street }}
    </td>
    <td>
      {{ row.address.city }}
    </td>
    <td>
      {{ row.address.state }}
    </td>
    <td align="center">
      <span class="actions show-on-tr-hover">
        <i class="fa fa-pencil-square opacity-on-hover"></i>
        <i class="fa fa-minus-square opacity-on-hover"></i>
      </span>
    </td>
  </template>

</mt-table>

mtTable.component.html

  <thead *ngIf="fields?.length">
    <tr>
      <th
        *ngFor="let field of fields"
        [ngClass]="{ 'sortable': field.isSortable }"
        (click)="activateColumn(field)">
        {{ field.label }}

        <span *ngIf="field.isSortable" class="sorting">
          <div class="arrow" [ngClass]="{ 'active-sorting': field === activeColumn && !field.reverseOrder }">&#9650;</div>
          <div class="arrow" [ngClass]="{ 'active-sorting': field === activeColumn && field.reverseOrder }">&#9660;</div>
        </span>
      </th>
    </tr>
  </thead>

  <tbody *ngIf="rows?.length">
    <tr *ngFor="let row of getPaginatedRows()"
        (click)="onRowClick(row)" class="clickable">
      <template [ngTemplateOutlet]="rowTemplate" [ngOutletContext]="{ row: row }"></template>
    </tr>
  </tbody>

  <tfoot *ngIf="pageSize">
    <tr>
      <td [attr.colspan]="fields?.length">
        <mt-table-pagination
          [rows]="getProcessedRows()"
          [pageSize]="pageSize"
          [(output)]="pagination">
        </mt-table-pagination>
      </td>
    </tr>
  </tfoot>

</table>

Do any of you have an idea on why this fails or know any possible alternative approaches?

Everything else not posted here is working fine and directly copying the template contents into mtTable.component.html populates the table as expected. Regardless, feel free to request any additional piece of code that you might found interesting to look at (or check the [github repo](https://github.com/jesuscc1993/angular2-table-demo/tree/dev) directly). — Jesús Cruz, Jun 16 '17 at 18:41

score 2 · Accepted Answer · answered Jun 16 '17 at 19:45

2

I would replace

@ViewChildren(TemplateRef) rowTemplate: TemplateRef<any>;

with

@ContentChild(TemplateRef) rowTemplate: TemplateRef<any>;

because i want to use template from Light DOM

How to use a child template inside a custom table component to display each row?

1 Answers1

Linked