Add Dynamic template to p-columnfilter

UI Components for Angular
Post Reply
Mahaveer85
Posts: 3
Joined: 18 Mar 2023, 07:03

18 Mar 2023, 07:22

Hi Team,

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

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests