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?