feat: Paginator & Table - Add option to customize dropdown icon prime…

…faces#9605
kborzecki · Jan 15, 2024 · 998c330 · 998c330
1 parent 0c28c0c
commit 998c330
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 0 deletions.
diff --git a/src/app/components/paginator/paginator.interface.ts b/src/app/components/paginator/paginator.interface.ts
@@ -16,6 +16,10 @@ export interface PaginatorState {
  * @group Templates
  */
 export interface PaginatorTemplates {
+    /**
+     * Custom dropdown trigger icon template.
+     */
+    dropdownicon(): TemplateRef<any>
     /**
      * Custom first page link icon template.
      */

diff --git a/src/app/components/paginator/paginator.ts b/src/app/components/paginator/paginator.ts
@@ -78,6 +78,9 @@ import { PaginatorState } from './paginator.interface';
                 [scrollHeight]="dropdownScrollHeight"
             >
                 <ng-template pTemplate="selectedItem">{{ currentPageReport }}</ng-template>
+                <ng-template pTemplate="dropdownicon" *ngIf="dropdownIconTemplate">
+                    <ng-container *ngTemplateOutlet="dropdownIconTemplate"></ng-container>
+                </ng-template>
             </p-dropdown>
             <button
                 type="button"
@@ -125,6 +128,9 @@ import { PaginatorState } from './paginator.interface';
                         <ng-container *ngTemplateOutlet="dropdownItemTemplate; context: { $implicit: item }"> </ng-container>
                     </ng-template>
                 </ng-container>
+                <ng-template pTemplate="dropdownicon" *ngIf="dropdownIconTemplate">
+                    <ng-container *ngTemplateOutlet="dropdownIconTemplate"></ng-container>
+                </ng-template>
             </p-dropdown>
             <div class="p-paginator-right-content" *ngIf="templateRight" [attr.data-pc-section]="'end'">
                 <ng-container *ngTemplateOutlet="templateRight; context: { $implicit: paginatorState }"></ng-container>
@@ -261,6 +267,8 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges {
 
     @ContentChildren(PrimeTemplate) templates: Nullable<QueryList<any>>;
 
+    dropdownIconTemplate: Nullable<TemplateRef<any>>;
+
     firstPageLinkIconTemplate: Nullable<TemplateRef<any>>;
 
     previousPageLinkIconTemplate: Nullable<TemplateRef<any>>;
@@ -309,6 +317,10 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges {
     ngAfterContentInit(): void {
         (this.templates as QueryList<PrimeTemplate>).forEach((item) => {
             switch (item.getType()) {
+                case 'dropdownicon':
+                    this.dropdownIconTemplate = item.template;
+                    break;
+
                 case 'firstpagelinkicon':
                     this.firstPageLinkIconTemplate = item.template;
                     break;

diff --git a/src/app/components/table/table.interface.ts b/src/app/components/table/table.interface.ts
@@ -524,6 +524,10 @@ export interface TableTemplates {
      * Custom paginator right template.
      */
     paginatorright(): TemplateRef<any>;
+    /**
+     * Custom paginator dropdown trigger icon template.
+     */
+    paginatordropdownicon(): TemplateRef<any>
     /**
      * Custom paginator dropdown item template.
      */

diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
@@ -163,6 +163,10 @@ export class TableService {
                 [styleClass]="paginatorStyleClass"
                 [locale]="paginatorLocale"
             >
+                <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate">
+                    <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate"></ng-container>
+                </ng-template>
+
                 <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate">
                     <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate"></ng-container>
                 </ng-template>
@@ -278,6 +282,10 @@ export class TableService {
                 [styleClass]="paginatorStyleClass"
                 [locale]="paginatorLocale"
             >
+                <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate">
+                    <ng-container *ngTemplateOutlet="paginatorDropdownIconTemplate"></ng-container>
+                </ng-template>
+
                 <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate">
                     <ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate"></ng-container>
                 </ng-template>
@@ -1043,6 +1051,8 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
 
     headerCheckboxIconTemplate: Nullable<TemplateRef<any>>;
 
+    paginatorDropdownIconTemplate: Nullable<TemplateRef<any>>;
+
     paginatorFirstPageLinkIconTemplate: Nullable<TemplateRef<any>>;
 
     paginatorLastPageLinkIconTemplate: Nullable<TemplateRef<any>>;
@@ -1247,6 +1257,10 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
                     this.paginatorRightTemplate = item.template;
                     break;
 
+                case 'paginatordropdownicon':
+                    this.paginatorDropdownIconTemplate = item.template;
+                    break;
+
                 case 'paginatordropdownitem':
                     this.paginatorDropdownItemTemplate = item.template;
                     break;