... ... ...

Angular: self-referencing template / ngx-datatable

52 views Asked by At

Let's say I have this kind of template markup:

<ngx-datatable [rows]="rawData">
  <ngx-datatable-column>...</ngx-datatable-column>
  <ngx-datatable-column>...</ngx-datatable-column>
  <ngx-datatable-column>...</ngx-datatable-column>
  <ngx-datatable-row-detail 
     (toggle)="onDetailToggle($event)">[...?...]</ngx-datatable-row-detail>
</ngx-datatable>

Some of the rows might have additional data, which has the same structure as the row itself (think of it as grouping data together and showing a grouped result with additional details).

I could refactor it to something like this:

<ng-container [ngTemplateOutlet]="table"
    [ngTemplateOutletContext]="{rawData: rawData}"></ng-container>

<ng-template #table let-rawData="rawData">
    <ngx-datatable [rows]="rawData">
      <ngx-datatable-column>...</ngx-datatable-column>
      <ngx-datatable-column>...</ngx-datatable-column>
      <ngx-datatable-column>...</ngx-datatable-column>
      <ngx-datatable-row-detail 
         (toggle)="onDetailToggle($event)">
         <!-- can't be possible, right? -->
         <ng-container [ngTemplateOutlet]="table"
            [ngTemplateOutletContext]="{rawData: row.data}"></ng-container>
      </ngx-datatable-row-detail>
    </ngx-datatable>
</ng-template>

How do I keep it DRY?

0

There are 0 answers