4

EDIT: I found [ngTemplateOutlet] which seems like a much better fit. Discussion continued in Can't get ngTemplateOutlet to work

ORIGINAL QUESTION:

I have built a table component that I will use in multiple different views to present different data. That data and it's presentation should be controlled by the consumer of the table component.

I tried to use <ng-content> to pass along a "renderer" that knows how to retrieve that data and how it should be presented. As you might understand, it was illegal use.

Here is a simplification of how I tried to use <ng-content>.

This is the table component template:

<table>
  <thead>
  <tr>
    <th *ngFor="let column in columns">{{column.heading}}</th>
  <tr>
  </thead>
  <tbody>
  <tr *ngFor="let item of items>
    <td *ngFor="let column of columns>
      <ng-content select="{{column.template}}"></ng-content>
    </td>
  </tr>
  </tbody> 
</table>

Here is the usage of the table component:

<my-table-component [items]="cars" [columns]="carColumns">
  <div class="model">{{item.model}}</div>
  <div class="color">{{item.color}}</div>
  <div class="gearbox>{{item.gearbox}}</div>
</my-table-component>

And here is example data:

cars = [
  { model: "volvo", color: "blue", gearbox: "manual" },
  { model: "volvo", color: "yellow", gearbox: "manual" },
  { model: "ford", color: "blue", gearbox: "automatic" },
  { model: "mercedes", color: "silver", gearbox: "automatic" }
];
carColumns = [
  { heading: "Model", template: ".model" },
  { heading: "Color", template: ".color" },
  { heading: "Gear Box", template: ".gearbox" }
];

By this I hope that you understand what I am trying to do. The obvious issues seems to be that <ng-content> does not work within a "loop" and it will not accept a dynamic "select". Also, item is of course not selectable it the table component consumer.

Most likely there are additional "do not".

As I am new to angular 2 I am hoping that I am mistaking something, or that I am using the wrong tools. Any ideas?

Community
  • 1
  • 1
Hampus
  • 2,769
  • 1
  • 22
  • 38
  • 1
    Looks like a dup of http://stackoverflow.com/questions/35190188/can-an-ng-content-be-used-inside-of-an-ng-for or http://stackoverflow.com/questions/36755844/angular2-child-component-as-data/36760027#36760027 – Günter Zöchbauer Nov 03 '16 at 15:21
  • @GünterZöchbauer Thanks. Through those answers I found http://stackoverflow.com/questions/37654004/angular2-feeding-data-back-to-template-from-ngtemplateoutlet which I will use to again attack the issue – Hampus Nov 03 '16 at 15:52
  • Or http://stackoverflow.com/questions/37676593/how-to-repeat-a-piece-of-html-multiple-times-without-ngfor-and-without-anoher-c/37676946#37676946 – Günter Zöchbauer Nov 03 '16 at 15:56
  • Can you please create a Plunker to reproduce and debug? Plunker provides a ready-to-use Angular2 TS template under the `[New | v]` button. – Günter Zöchbauer Nov 04 '16 at 09:01

1 Answers1

0

[ngTemplateOutlet] together with [ngOutletContext] is a much better fit for this use case. A working example for the same use case is given in: Can't get ngTemplateOutlet to work

Community
  • 1
  • 1
Hampus
  • 2,769
  • 1
  • 22
  • 38