Fixed #10159 - Header and Footer Template for AutoComplete

primefaces · Apr 26, 2021 · cef232d · cef232d
1 parent a07431b
commit cef232d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts
@@ -41,6 +41,7 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
                 (click)="handleDropdownClick($event)" *ngIf="dropdown" [attr.tabindex]="tabindex"></button>
             <div #panel *ngIf="overlayVisible" [ngClass]="['p-autocomplete-panel p-component']" [style.max-height]="virtualScroll ? 'auto' : scrollHeight" [ngStyle]="panelStyle" [class]="panelStyleClass"
                 [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)">
+                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
                 <ul role="listbox" [attr.id]="listId" class="p-autocomplete-items" [ngClass]="{'p-autocomplete-virtualscroll': virtualScroll}">
                     <ng-container *ngIf="group">
                         <ng-template ngFor let-optgroup [ngForOf]="suggestions">
@@ -74,6 +75,7 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
                         <li *ngIf="noResults && emptyMessage" class="p-autocomplete-emptymessage p-autocomplete-item">{{emptyMessage}}</li>
                     </ng-template>
                 </ul>
+                <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
             </div>
         </span>
     `,
@@ -227,6 +229,10 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
 
     itemTemplate: TemplateRef<any>;
 
+    headerTemplate: TemplateRef<any>;
+
+    footerTemplate: TemplateRef<any>;
+
     selectedItemTemplate: TemplateRef<any>;
 
     groupTemplate: TemplateRef<any>;
@@ -370,6 +376,14 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
                     this.selectedItemTemplate = item.template;
                 break;
 
+                case 'header':
+                    this.headerTemplate = item.template;
+                break;
+
+                case 'footer':
+                    this.footerTemplate = item.template;
+                break;
+
                 default:
                     this.itemTemplate = item.template;
                 break;

diff --git a/src/app/showcase/components/autocomplete/autocompletedemo.html b/src/app/showcase/components/autocomplete/autocompletedemo.html
@@ -596,6 +596,14 @@ <h5>Templates</h5>
                             <td>selectedItem</td>
                             <td>$implicit: value</td>
                         </tr>
+                        <tr>
+                            <td>header</td>
+                            <td>-</td>
+                        </tr>
+                        <tr>
+                            <td>footer</td>
+                            <td>-</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>