ConfirmDialog is backed by a service utilizing Observables to display confirmation windows easily that can be shared by multiple actions on the same component.
import { ConfirmDialogModule } from 'primeng/confirmdialog';
ConfirmDialog is defined using p-confirmDialog tag and an instance of ConfirmationService is required to display it bycalling confirm method.
<p-toast></p-toast>
<p-confirmDialog [style]="{width: '50vw'}"></p-confirmDialog>
<p-button (click)="confirm1()" icon="pi pi-check" label="Confirm"></p-button>
<p-button (click)="confirm2()" icon="pi pi-times" label="Delete" class="p-button-danger"></p-button>
The position property of the confirm options is used to display a Dialog at all edges and corners of the screen.
<p-toast></p-toast>
<p-confirmDialog [style]="{ width: '50vw' }" key="positionDialog" [position]="position" rejectButtonStyleClass="p-button-outlined"></p-confirmDialog>
<div class="flex flex-wrap justify-content-center gap-2">
<p-button (click)="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" styleClass="p-button-help"></p-button>
<p-button (click)="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" styleClass="p-button-help"></p-button>
</div>
<div class="flex flex-wrap justify-content-center gap-2">
<p-button (click)="confirmPosition('top-left')" icon="pi pi-arrow-down" label="TopLeft" styleClass="p-button-warning"></p-button>
<p-button (click)="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" styleClass="p-button-warning"></p-button>
<p-button (click)="confirmPosition('top-right')" icon="pi pi-arrow-down" label="TopRight" styleClass="p-button-warning"></p-button>
</div>
<div class="flex flex-wrap justify-content-center gap-2">
<p-button (click)="confirmPosition('bottom-left')" icon="pi pi-arrow-up" label="BottomLeft" styleClass="p-button-success"></p-button>
<p-button (click)="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" styleClass="p-button-success"></p-button>
<p-button (click)="confirmPosition('bottom-right')" icon="pi pi-arrow-up" label="BottomRight" styleClass="p-button-success"></p-button>
</div>
Properties of the dialog are defined in two ways, message, icon, header properties can either be defined using confirm method or declaratively on p-confirmDialog ng-template by header, message, icon 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.
In addition, buttons at footer section can be customized by passing your own UI, important note to make confirmation work with a custom UI is defining a local ng-template variable for the dialog and assign accept()-reject() methods to your own buttons.
<p-toast></p-toast>
<p-confirmDialog #cd [style]="{ width: '50vw' }">
<ng-template pTemplate="header">
<h3>Header Content</h3>
</ng-template>
<ng-template pTemplate="icon">
<i class="pi pi-user"></i>
</ng-template>
<ng-template pTemplate="message">
<p>Message Template</p>
</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>
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
p-dialog | Container element |
p-confirmdialog | Container element |
p-dialog-titlebar | Container of header. |
p-dialog-title | Header element. |
p-dialog-titlebar-icon | Icon container inside header. |
p-dialog-titlebar-close | Close icon element. |
p-dialog-content | Content element. |
ConfirmDialog component uses alertdialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default behavior. In addition aria-modal is added since focus is kept within the popup.
It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary.
When confirm function is used and a trigger is passed as a parameter, ConfirmDialog adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the popup is defined.
confirm1() {
this.confirmationService.confirm({
message: 'Are you sure that you want to proceed?',
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle',
accept: () => acceptFunc(),
reject: () => rejectFunc()
});
<p-button (click)="confirm1()" icon="pi pi-check" label="Confirm"></p-button>
<p-confirmDialog></p-confirmDialog>
If the dialog is controlled with the visible property aria-expanded and aria-controls need to be handled explicitly.
<p-confirmDialog
id="dialog"
[visible]="visible"
(onHide)="visible = false"
message="Are you sure you want to proceed?"
header="Confirmation"
icon="pi pi-exclamation-triangle"
></p-confirmDialog>
<p-button
(click)="visible = true"
icon="pi pi-check"
label="Confirm"
aria-controls="{{visible ? 'dialog' : null}}
aria-expanded="{{visible ? true : false}}"
></p-button>
Key | Function |
---|---|
tab | Moves focus to the next the focusable element within the popup. |
shift + tab | Moves focus to the previous the focusable element within the popup. |
escape | Closes the popup and moves focus to the trigger. |
Key | Function |
---|---|
enter | Triggers the action, closes the popup and moves focus to the trigger. |
space | Triggers the action, closes the popup and moves focus to the trigger. |
API defines helper props, events and others for the PrimeNG ConfirmDialog module.
ConfirmDialog uses a Dialog UI that is integrated with the Confirmation API.
Defines the input properties of the component.
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.
Defines the templates used by the component.
Defines the custom interfaces used by the module.
Represents a confirmation dialog configuration.
Defines the service used by the component
Methods used in service.