Skip to main content
The MagaryConfirmationService provides a programmatic way to display confirmation dialogs. It uses RxJS observables to manage confirmation state and callbacks for accept/reject actions.

​
Injection

import { Component, inject } from '@angular/core';
import { MagaryConfirmationService } from 'ng-magary';

@Component({
  selector: 'app-example',
  template: `
    <button (click)="confirmDelete()">Delete Item</button>
  `
})
export class ExampleComponent {
  confirmationService = inject(MagaryConfirmationService);

  confirmDelete() {
    this.confirmationService.confirm({
      message: 'Are you sure you want to delete this item?',
      header: 'Confirm Delete',
      accept: () => {
        // Delete logic
      }
    });
  }
}

​
Properties

​
requireConfirmation$

Observable that emits when a confirmation dialog should be displayed. 
readonly requireConfirmation$: Observable<Confirmation | null>
Example: 
this.confirmationService.requireConfirmation$.subscribe(confirmation => {
  if (confirmation) {
    console.log('Confirmation requested:', confirmation.message);
  }
});

​
acceptConfirmation$

Observable that emits when a confirmation is accepted. 
readonly acceptConfirmation$: Observable<Confirmation | null>

​
Methods

​
confirm()

Displays a confirmation dialog with the specified configuration.
​
confirmation
Confirmation
required
The confirmation configuration object
​
confirmation.message
string
The main message to display in the confirmation dialog
​
confirmation.header
string
The header/title of the confirmation dialog
​
confirmation.icon
string
Custom icon to display in the dialog
​
confirmation.key
string
Unique key to target a specific confirm dialog component
​
confirmation.accept
() => void
Callback function to execute when the user accepts
​
confirmation.reject
() => void
Callback function to execute when the user rejects
​
confirmation.acceptLabel
string
Custom label for the accept button. Default: ‘Yes’
​
confirmation.rejectLabel
string
Custom label for the reject button. Default: ‘No’
​
confirmation.acceptVisible
boolean
Whether to show the accept button. Default: true
​
confirmation.rejectVisible
boolean
Whether to show the reject button. Default: true
​
confirmation.acceptButtonStyleClass
string
Custom CSS class for the accept button
​
confirmation.rejectButtonStyleClass
string
Custom CSS class for the reject button
​
confirmation.style
Record<string, unknown> | null
Inline styles to apply to the dialog
​
confirmation.styleClass
string
Custom CSS class for the dialog
​
confirmation.defaultFocus
'accept' | 'reject' | 'none'
Which button should receive focus by default
Returns: MagaryConfirmationService (for method chaining) Example: 
this.confirmationService.confirm({
  message: 'Are you sure you want to proceed?',
  header: 'Confirmation',
  accept: () => {
    console.log('Accepted');
  },
  reject: () => {
    console.log('Rejected');
  }
});

​
close()

Programmatically closes the confirmation dialog. Parameters: None Returns: MagaryConfirmationService (for method chaining) Example: 
this.confirmationService.close();

​
onAccept()

Notifies observers that a confirmation was accepted. This is typically called internally by the confirm dialog component. Parameters: None Returns: void

​
Usage Examples

import { Component, inject } from '@angular/core';
import { MagaryConfirmationService } from 'ng-magary';

@Component({
  selector: 'app-user-list',
  template: `
    <button (click)="deleteUser(123)">Delete User</button>
  `
})
export class UserListComponent {
  confirmationService = inject(MagaryConfirmationService);

  deleteUser(userId: number) {
    this.confirmationService.confirm({
      message: 'Are you sure you want to delete this user?',
      header: 'Delete Confirmation',
      icon: 'pi pi-exclamation-triangle',
      accept: () => {
        // Call API to delete user
        console.log('Deleting user:', userId);
        this.performDelete(userId);
      },
      reject: () => {
        console.log('Delete cancelled');
      }
    });
  }

  performDelete(userId: number) {
    // Actual delete logic
  }
}

​
Dialog Display

To display confirmation dialogs in your application, you need to include the mag-confirm-dialog component in your template: 
<mag-confirm-dialog></mag-confirm-dialog>
Typically, this is added to your root component (e.g., app.component.html) so confirmations can be triggered from anywhere in your application.

​
Multiple Dialog Instances

You can have multiple confirmation dialog instances using the key property: 
<mag-confirm-dialog key="global"></mag-confirm-dialog>
<mag-confirm-dialog key="delete"></mag-confirm-dialog>

// Target specific dialog
this.confirmationService.confirm({
  key: 'delete',
  message: 'Delete this item?'
});

​
Type Definitions

export interface Confirmation {
  message?: string;
  key?: string;
  icon?: string;
  header?: string;
  accept?: () => void;
  reject?: () => void;
  acceptLabel?: string;
  rejectLabel?: string;
  acceptVisible?: boolean;
  rejectVisible?: boolean;
  acceptButtonStyleClass?: string;
  rejectButtonStyleClass?: string;
  style?: Record<string, unknown> | null;
  styleClass?: string;
  defaultFocus?: 'accept' | 'reject' | 'none';
}

​
Method Chaining

The confirm() and close() methods return the service instance, allowing for method chaining: 
this.confirmationService
  .confirm({ message: 'First confirmation' })
  .close();

Build docs developers (and LLMs) love

Get started for freeTalk to us