I would like to create a primeng table as a common component. So would like to provide the column header definition from the angular component.
The table columns header has a filter (p-columnFilter). one filter is custom and have its own ng-template.
My Problem - How can i keep the filter template outside of table and use it whenever table configuration(sending from component) has some template flag: true.
Example:
Code: Select all
<p-table
dataKey="id"
[value]="projects"
[rows]="10"
>
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="title" pResizableColumn>
Name <p-sortIcon field="title"></p-sortIcon>
<p-columnFilter type="text" field="title" display="menu" [hideOnClear]="true"></p-columnFilter>
</th>
<th pSortableColumn="type" pResizableColumn>
type<p-sortIcon field="type"></p-sortIcon>
<p-columnFilter type="numeric" field="type" display="menu" [hideOnClear]="true">
<ng-container *ngTemplateOutlet="myTemplate">
</ng-container>
</p-columnFilter>
</th>
<th pSortableColumn="status" pResizableColumn>
type<p-sortIcon field="status"></p-sortIcon>
<p-columnFilter type="numeric" field="status" display="menu" [hideOnClear]="true">
<ng-container *ngTemplateOutlet="myTemplate">
</ng-container>
</p-columnFilter>
</th>
<tr>
<ng-template>
<p-table>
ourter reference
<ng-template pTemplate="filter" let-value let-filter="filterCallback" #myTemplate>
<p-dropdown
[ngModel]="value"
[options]="types"
(onChange)="filter($event.value)"
placeholder="Any"
>
<ng-template let-option pTemplate="item">
<span [class]="'customer-badge status-' + option.value">{{ option.label }}</span>
</ng-template>
</p-dropdown>
</ng-template>
But this code is not working. Could you please suggest how can i define the template outside and use it at multiple places