import {ConfirmDialogModule,ConfirmationService} from 'primeng/primeng';
ConfirmDialog is defined using p-confirmDialog tag and an instance of ConfirmationService is required to display it by calling confirm method.
<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="425"></p-confirmDialog>
<button type="text" (click)="confirm()" pButton icon="fa-check" label="Confirm"></button>
export class ConfirmDialogDemo {
constructor(private confirmationService: ConfirmationService) {}
confirm() {
this.confirmationService.confirm({
message: 'Are you sure that you want to perform this action?',
accept: () => {
//Actual logic to perform a confirmation
}
});
}
}
Confirm method takes a confirmation instance used to customize the dialog UI along with accept and reject actions.
Name | Type | Default | Description |
---|---|---|---|
message | string | null | Message of the confirmation. |
header | string | null | Header text of the dialog. |
icon | string | null | Icon to display next to the message. |
accept | Function | null | Callback to execute when action is confirmed. |
reject | Function | null | Callback to execute when action is rejected. |
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 template. If these values are unlikely to change then declarative approach would be useful, still properties defined in a template can be overriden 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 template variable for the dialog and assign accept()-reject() methods to your own buttons.
<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="425" #cd>
<footer>
<button type="button" pButton icon="fa-close" label="No" (click)="cd.reject()"></button>
<button type="button" pButton icon="fa-check" label="Yes" (click)="cd.accept()"></button>
</footer>
</p-confirmDialog>
Name | Type | Default | Description |
---|---|---|---|
header | string | null | Title text of the dialog. |
message | string | null | Message of the confirmation. |
icon | string | null | Icon to display next to message. |
acceptLabel | string | Yes | Label of the accept button. |
acceptIcon | string | fa-check | Icon of the accept button. |
acceptVisible | string | fa-check | Visibility of the accept button. |
rejectLabel | string | fa-close | Label of the reject button. |
rejectIcon | string | No | Icon of the reject button. |
rejectVisible | boolean | true | Visibility of the reject button. |
width | int | 300 | Width of the dialog. |
height | int | auto | Height of the dialog. |
closeOnEscape | boolean | true | Specifices if pressing escape key should hide the dialog. |
rtl | boolean | false | When enabled dialog is displayed in RTL direction. |
closable | boolean | true | Adds a close icon to the header to hide the dialog. |
responsive | boolean | true | In responsive mode, dialog adjusts itself to screen width. |
appendTo | any | null | Target element to attach the dialog, valid values are "body" or a local template variable of another element. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-dialog | Container element |
ui-confirmdialog | Container element |
ui-dialog-titlebar | Container of header. |
ui-dialog-title | Header element. |
ui-dialog-titlebar-icon | Icon container inside header. |
ui-dialog-titlebar-close | Close icon element. |
ui-dialog-content | Content element. |
None.
<p-growl [value]="msgs"></p-growl>
<p-confirmDialog width="425"></p-confirmDialog>
<button type="button" (click)="confirm1()" pButton icon="fa-check" label="Confirm"></button>
<button type="button" (click)="confirm2()" pButton icon="fa-trash" label="Delete"></button>
@Component({
templateUrl: 'showcase/demo/confirmdialog/confirmdialogdemo.html',
providers: [ConfirmationService]
})
export class ConfirmDialogDemo {
msgs: Message[] = [];
constructor(private confirmationService: ConfirmationService) {}
confirm1() {
this.confirmationService.confirm({
message: 'Are you sure that you want to perform this action?',
accept: () => {
this.msgs = [];
this.msgs.push({severity:'info', summary:'Confirmed', detail:'You have accepted'});
}
});
}
confirm2() {
this.confirmationService.confirm({
message: 'Do you want to delete this record?',
header: 'Delete Confirmation',
icon: 'fa fa-trash',
accept: () => {
this.msgs = [];
this.msgs.push({severity:'info', summary:'Confirmed', detail:'Record deleted'});
}
});
}
}