ConfirmDialog: pTemplate="message" and pTemplate="icon" is missing

[akhalaiav]

Describe the feature you would like to see added

According to my design, I should have a custom message for the dialog.

The current implementation has header and footer templates

According to documentation https://primeng.org/confirmdialog

<div class="card flex justify-content-center">
    <p-toast></p-toast>
    <p-confirmDialog #cd [style]="{width: '50vw'}">
        <ng-template pTemplate="header">
            <h3>Header Content</h3>
        </ng-template>
        <ng-template pTemplate="footer">
            <button type="button" pButton icon="pi pi-times" label="No" (click)="cd.reject()"></button>
            <button type="button" pButton icon="pi pi-check" label="Yes" (click)="cd.accept()"></button>
        </ng-template>
    </p-confirmDialog>
    <p-button (click)="confirm1()" icon="pi pi-check" label="Confirm"></p-button>
</div>

Is your feature request related to a problem?

No response

Describe the solution you'd like

Will be better when we have something like that:

<div class="card flex justify-content-center">
...
    <p-confirmDialog>
        <ng-template pTemplate="message">
            <p>Custom Message Structure</p>
        </ng-template>
    </p-confirmDialog>
...
</div>

Describe alternatives you have considered

For now, I should create a string with HTML code and add to the message property like:

this.confirmationService.confirm({
      header: 'Some Header',
      message: '<p>Some Custom Message with needed logic</p>',
      accept: () => {
        console.log('accepted')
      },
    });

Additional context

Current:
PrimeNg Version - 16.3.1
Node 18

Environment
Latest Angular and Primeng version

[cetincakiroglu]

Hi,

As the info text in the Templates section of the ConfirmDialog page, indicates that:

Properties of the dialog are defined in two ways, message, icon, and header properties can either be defined using confirm method or declaratively on p-confirmDialog ng-template by header and footer templates. If these values are unlikely to change then declarative approach would be useful, still properties defined in a ng-template can be overridden with confirm method call.

• You can declaratively use templates with ng-template (header, footer)
• You can define it by API (message, icon, header) as shown below

        this.confirmationService.confirm({
            message: 'Are you sure that you want to proceed?',
            header: 'Confirmation',
            icon: 'pi pi-exclamation-triangle',
            accept: () => {
                this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted' });
            },
            reject: (type: ConfirmEventType) => {
                switch (type) {
                    case ConfirmEventType.REJECT:
                        this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' });
                        break;
                    case ConfirmEventType.CANCEL:
                        this.messageService.add({ severity: 'warn', summary: 'Cancelled', detail: 'You have cancelled' });
                        break;
                }
            }
        });

So this is not an issue or bug. A declarative option for the message does not exist. However, it's a good idea to put it as a feature.

Thanks for reporting and requesting it!