ConfirmDialog | Add missing templates (message, icon) & update the docs

primefaces · Sep 19, 2023 · 457de09 · 457de09
1 parent 458014d
commit 457de09
Show file tree

Hide file tree

Showing 4 changed files with 546 additions and 87 deletions.
diff --git a/src/app/components/confirmdialog/confirmdialog.interface.ts b/src/app/components/confirmdialog/confirmdialog.interface.ts
@@ -12,6 +12,14 @@ export interface ConfirmDialogTemplates {
      * Custom template of footer.
      */
     footer(): TemplateRef<any>;
+    /**
+     * Custom template of message.
+     */
+    message(): TemplateRef<any>;
+    /**
+     * Custom template of icon.
+     */
+    icon(): TemplateRef<any>;
     /**
      * Custom template of rejecticon.
      */

diff --git a/src/app/components/confirmdialog/confirmdialog.ts b/src/app/components/confirmdialog/confirmdialog.ts
@@ -68,8 +68,14 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
                     </div>
                 </div>
                 <div #content class="p-dialog-content">
-                    <i [ngClass]="'p-confirm-dialog-icon'" [class]="option('icon')" *ngIf="option('icon')"></i>
-                    <span class="p-confirm-dialog-message" [innerHTML]="option('message')"></span>
+                    <i [ngClass]="'p-confirm-dialog-icon'" [class]="option('icon')" *ngIf="!iconTemplate && option('icon')"></i>
+                    <ng-container *ngIf="iconTemplate">
+                        <ng-template *ngTemplateOutlet="iconTemplate"></ng-template>
+                    </ng-container>
+                    <span class="p-confirm-dialog-message" *ngIf="!messageTemplate" [innerHTML]="option('message')"></span>
+                    <ng-container *ngIf="messageTemplate">
+                        <ng-template *ngTemplateOutlet="messageTemplate"></ng-template>
+                    </ng-container>
                 </div>
                 <div class="p-dialog-footer" *ngIf="footer || footerTemplate">
                     <ng-content select="p-footer"></ng-content>
@@ -351,10 +357,19 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy {
                 case 'header':
                     this.headerTemplate = item.template;
                     break;
+
                 case 'footer':
                     this.footerTemplate = item.template;
                     break;
 
+                case 'message':
+                    this.messageTemplate = item.template;
+                    break;
+
+                case 'icon':
+                    this.iconTemplate = item.template;
+                    break;
+
                 case 'rejecticon':
                     this.rejectIconTemplate = item.template;
                     break;
@@ -374,6 +389,10 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy {
 
     acceptIconTemplate: Nullable<TemplateRef<any>>;
 
+    messageTemplate: Nullable<TemplateRef<any>>;
+
+    iconTemplate: Nullable<TemplateRef<any>>;
+
     confirmation: Nullable<Confirmation>;
 
     _visible: boolean | undefined;