Skip to main content

​
Overview

ConfirmDialog is used to confirm user actions with accept/reject callbacks. It works with the MagaryConfirmationService to show confirmation prompts.

​
Import

import { MagaryConfirmDialog, MagaryConfirmationService } from 'ng-magary';

​
Basic Usage

<button (click)="confirm()">Delete</button>

<magary-confirm-dialog></magary-confirm-dialog>

​
Custom Labels

<magary-confirm-dialog
  [acceptLabel]="'Confirm'"
  [rejectLabel]="'Cancel'"
  [acceptIcon]="'check'"
  [rejectIcon]="'x'">
</magary-confirm-dialog>

​
Multiple Dialogs with Keys

<!-- Multiple confirm dialogs for different contexts -->
<magary-confirm-dialog key="delete"></magary-confirm-dialog>
<magary-confirm-dialog key="save"></magary-confirm-dialog>

​
Hide Buttons

this.confirmationService.confirm({
  message: 'This is just a notification',
  header: 'Info',
  rejectVisible: false // Hide reject button
});

​
Input Properties

​
header
string
Header text for the dialog
​
icon
string
Icon to display in the dialog
​
message
string
Message text to display
​
key
string
Key to match specific confirmation requests
​
acceptLabel
string
default:"'Yes'"
Label for the accept button
​
rejectLabel
string
default:"'No'"
Label for the reject button
​
acceptIcon
string
Icon for the accept button
​
rejectIcon
string
Icon for the reject button
​
acceptVisible
boolean
default:"true"
Show/hide the accept button
​
rejectVisible
boolean
default:"true"
Show/hide the reject button
​
dismissableMask
boolean
default:"false"
Whether clicking the backdrop dismisses the dialog
​
closeOnEscape
boolean
default:"true"
Close dialog on Escape key

​
Confirmation Interface

interface Confirmation {
  message?: string;
  key?: string;
  icon?: string;
  header?: string;
  accept?: () => void;
  reject?: () => void;
  acceptLabel?: string;
  rejectLabel?: string;
  acceptVisible?: boolean;
  rejectVisible?: boolean;
}

​
Service API

​
confirm(confirmation: Confirmation)
void
Show a confirmation dialog
​
close()
void
Close the active confirmation dialog

​
Features

  • Service-based: Trigger from anywhere in your app
  • Multiple instances: Support multiple dialogs with keys
  • Customizable: Override all labels and icons
  • Button visibility: Show/hide accept or reject buttons
  • Callbacks: Accept and reject handlers
  • Keyboard support: Escape to close

​
Accessibility

  • Uses underlying dialog component’s accessibility features
  • Proper focus management
  • Keyboard navigation
  • ARIA attributes

Build docs developers (and LLMs) love

Get started for freeTalk to us