Angular 4 + primeng : pass HTML content from a component to another

Question

I want to add some server-side pagination functions to the primeng datatable (p-datatable) in multiple places so I declared a new component "pagin-datatable.component" with the functions and behavior I need.

So pagin-datatable.component.html (template) comes with :

<p-dataTable [value]="value" 
  resizableColumns="true" 
  scrollable="true" 
  scrollWidth="100%" 
  [(rows)]="this.gridOptions.rows" 
  [paginator]="true" 
  [lazy]="true" 
  [totalRecords]="nbTotal" 
  (onFilter)="filtrage($event)"
  (onPage)="pagination($event)" 
  (onSort)="tri($event)" 
  [rowsPerPageOptions]="rowsPerPageOptions" >
  /* There should be the p-columns */
</p-dataTable>

I want my p-columns still be declared in my main.component.html like :

<pagin-datatable [value]="partenaires" (pagin)="refresh($event)" [rowsPerPageOptions]="[5,10,20,40]">
        <p-column sortable="true" [filter]="true" field="aField"     header="A HEADER"></p-column>
        /* And so it goes for every other p-columns */
 </pagin-datatable>

My question is the following : how do I tell my pagin-component to let the p-datatable treat the content sent into the component tags ?

After the answer below:

Found this article to fix the primeng problem : github.com/primefaces/primeng/issues/1215.

Answer 1

you can use in pagin-datatable.component.html like this

    <p-dataTable [value]="value" 
  resizableColumns="true" 
  scrollable="true" 
  scrollWidth="100%" 
  [(rows)]="this.gridOptions.rows" 
  [paginator]="true" 
  [lazy]="true" 
  [totalRecords]="nbTotal" 
  (onFilter)="filtrage($event)"
  (onPage)="pagination($event)" 
  (onSort)="tri($event)" 
  [rowsPerPageOptions]="rowsPerPageOptions" >
  /* There should be the p-columns */
  <ng-content></ng-content>
</p-dataTable>

and in your main.component.html you can warp your column in pagin-datatable as you want.