I have been working on creating a feature that allows users to add custom columns to a PrimeNg table. The main reason for developing this feature is to provide users with a default table that already has numerous configuration options pre-set.
However, I am facing an issue where I am unable to repeat an ng-template component multiple times.
Version Information
- Angular version:
7.2.12 - Primeng version:
7.1.0 - @angular/animations version:
7.2.12
Goal
My goal is to create a wrapper that simplifies the process of column creation and eliminates the need to create multiple templates within the table body.
For instance, instead of:
<table>
<!-- Row 1 -->
<ng-template #header><th>edit></th></ng-template>
<ng-template #content><button>edit></button></ng-template>
<!-- Row 2 -->
<ng-template #header><th>delete></th></ng-template>
<ng-template #content><button>delete></button></ng-template>
</table>I aim to simplify it to:
<table>
<!-- Row 1 -->
<custom-column>
<th header>edit></th>
<button>edit></button>
</custom-column>
<!-- Row 2 -->
<custom-column>
<th header>delete></th>
<button>delete></button>
</custom-column>
</table>You can find my progress on this in the following StackBlitz link.
Current Issue
Although I have made significant progress, I am currently struggling with repeating the content template for each row in the table. As of now, only the buttons from the last row are showing up. This could be due to the fact that the ng-content transcludes only once.
I would appreciate any guidance on whether achieving my intended functionality is possible and if so, how I should modify my code to make it work correctly.